Mozilla（Firefox），Marker，Multiple SVGs [英] Mozilla(Firefox) , Marker , Multiple SVGs

问题描述

我已经将d3的强制有向图布局嵌入到extjs选项卡中，以便每次添加新选项卡时都会生成新的图表svg。
到目前为止没有问题。

现在我打算把图表转换为一个有向图（通过添加一个标记，并告诉线使用它） p>

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

 < svg width =100％height =100％> 
 
< defs>< marker id =end-arrowviewBox =0 -5 10 10refX =6markerWidth =3markerHeight =3orient = >< path d =M0，-5L10,0L0,5fill =＃ccc>< / path>< / marker& 
< / defs> 
 
< g transform =translate（4,0）scale（1）>< line class =linksig =30.84style =stroke-width：3; x1 =538y1 =347x2 =409y2 =467marker-end =url（＃end-arrow）>< / line> 
 ... 
< / g> 
< / svg> 
  

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

但是使用Firefox标记只会显示第一个svg。 （第一个标签）
所有其他svgs不会显示任何箭头。

检查元素告诉我标记在那里，给他们。

这就是我的思想在哪里或寻找什么。 ：（

解决方案

在同一个html或svg文档中有多个不同的ID。这是无效的，不同的UA响应不同，但是你不允许这样做，它他们是不一致的。

I've enbedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph svg gets generated. No Problemo so far.

Now I intended to turn the graph into a directed one (by adding a marker and tell the lines to use it)

Each generated svg elements is following this pattern:

<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>

With Crome everything works just fine. So I arrived at the concusion that the structur and the way I generate the svgs should be more or less correct.

But with Firefox the Markers will only show for the first svg. (the first tab) All other svgs won't show any Arrowheads.

"Inspect Elements" tells me the Markers are there and that the lines are refering to them.

And this is where I'm running out of Ideas where or what to look for. :(

解决方案

You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.

这篇关于Mozilla（Firefox），Marker，Multiple SVGs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！