呈现HTML*Within*Raphael（SVG/VML）形状的想法

Question

我正在开发一个应用程序，它使用Raphael绘制原始形状（矩形、椭圆、三角形等）和线条，但允许用户移动/调整这些对象的大小。其中一个主要要求是形状的表面可以有格式化的文本。实际的文本是Markdown的子集（简单的东西，如粗体、斜体、列表），并且呈现为HTML。

FWIW-我正在使用backbone.js视图来模块化形状逻辑。

我最初的想法是将foreignobject组合用于SVG，将直接HTML与VML组合用于IE。但是，IE9不支持foreignobject，因此不得不放弃这种方法。

通常被Raphael捕获的事件（拖动、单击等）需要从覆盖层转发到Raphael对象。对于支持指针-事件的浏览器，这很容易做到：

div.shape-text-overlay {
  position: absolute;
  background: none;
  pointer-events: none;
}

但是，其他浏览器（如IE8及以下版本）需要转发事件：

var forwardedEvents = 'mousemove mousedown mouseup click dblclick mouseover mouseout';
this.$elText.on(forwardedEvents, function(e) {

  var original = e.originalEvent;

  var event;
  if (document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(e.type, true, true);
  } 
  else {
    event = document.createEventObject();
    event.eventType = e.type;
  }

  // FYI - This is the most simplistic approach to event forwarding. 
  // My real implementation is much larger and uses MouseEvents and UIEvents separately.

  event.eventName = e.type;
  _.extend(event, original);

  if (document.createEvent) {
    that.el.node.dispatchEvent(event);
  } 
  else {
    that.el.node.fireEvent('on' + event.eventType, event);
  }

});

重叠形状会导致文本重叠，因为文本/形状位于不同的层上。虽然重叠形状并不常见，但这看起来很糟糕：

Answer 1

我建造了 <罢工> 本项目 （不再活动）使用拉斐尔。我所做的实际上是放弃了在SVG中使用HTML的想法，因为它太混乱了。相反，我绝对地将HTML层放置在SVG层的顶部，并将它们一起移动。当我想要显示HTML时，我只是将其淡出，并将相应的SVG对象淡出。如果时间安排和排列正确，那么未经训练的眼睛是不会注意到的。

虽然这可能不一定是你要找的，也许它会让你的头脑思考新的方法来解决你的问题！请随意查看该页面上的JS，因为它是未缩小的；）

该项目是一个集铅应用程序。如果你只是想看看它是如何工作的，在第一个下拉菜单中选择“朋友”，你就不需要提供任何信息。