嵌套的SVG和带有transform()的偏移量



我正在为d3图生成一个图例。以下是生成的html的摘录。

<svg width="200" height="180" style="background-color: rgb(225, 210, 225);">
<svg class="legend" id="#legendNodes"
width="180" height="100">
<g transform="translate(3,0)">
<rect width="18" height="18" style="fill: rgb(31, 119, 180);"></rect><text x="24" y="9" dy=".35em"
style="font-size: 10px;">External...Artefact</text>
</g>
<g .../>
</svg><svg class="legend" id="#legendLinks" width="180" height="80" transform="translate(0,120)">
<g transform="translate(3,0)">
<rect width="18" height="18" style="fill: rgb(214, 39, 40);"></rect><text x="24" y="9" dy=".35em"
style="font-size: 10px;">External...Link</text>
</g>
<g ... />
</svg>
</svg> 

我想把两个形状放在另一个上面:节点列表和链接列表(井类型(。我把它们放在一个容器里;变换";下面的一个具有右偏移(在本例中为120px,1.9(。

这在firefox上运行得很好,但现在我需要在Chrome上使用它,但它已经不起作用了。

有关于如何解决这个问题的提示吗?

谢谢,Edouard

这里有一个解决方案:我改变了y的位置,而不是tranform((。

</svg><svg class="legend" id="#legendLinks" width="180" height="80" y="120">

最新更新