Mozilla(Firefox),Marker,多个SVG

时间:2013-08-07 09:54:55

标签: firefox svg d3.js marker

我已经将d3的强制导向图布局嵌入到extjs标签中,这样每次添加新标签时都会生成新的图形svg。 到目前为止没有问题。

现在我打算将图形变成有向图形(通过添加标记并告诉线条使用它)

每个生成的svg元素都遵循以下模式:

<svg width="100%" height="100%">

<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3"     markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>

<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>

使用Crome一切正常。 所以我得出了结构和结构的结论 我生成svgs的方式应该或多或少是正确的。

但是使用Firefox,Markers只会显示第一个svg。 (第一个标签) 所有其他svgs都不会显示任何箭头。

“Inspect Elements”告诉我标记在那里,并且这些线条正在引用它们。

这就是我的想法在哪里或者在寻找什么的地方。 :(

1 个答案:

答案 0 :(得分:1)

您在同一个html或svg文档中有多个不同的ID。 This is invalid,不同的UAs反应不同,但由于您不允许这样做,因此它们不一致并不重要。