Question

我正在使用d3.js库，需要在另一个子svg元素中绘制一些svg元素。例如，我在svg中有一个容器元素，它是一个＆＃34; rect＆＃34;。我也希望在＃34; rect＆＃34;中画出一些线条。但是我在查看这些线路时遇到了问题。

如果我将这些行添加到主svg容器中，它可以正常工作。但是当我将这些行添加到＆＃34; rect＆＃34;时，这些行是不可见的。我猜，坐标是个问题。

那么，任何人都可以告诉我，在绘制子元素时如何计算坐标？它是否会被它的父坐标自动抵消？或者＆＃34; rect＆＃34;会拥有它自己的坐标系吗？

Answer 1

<line>未在<rect>内呈现。

如果您查看https://www.w3.org/TR/SVG/shapes.html#RectElement，则只允许动画和描述性元素作为<rect>的内容

您可能希望重新构建代码，以便将g元素用作容器元素，以便将相关图形元素（例如<rect>和<line>）组合在一起。

如果需要定位分组元素，可以使用变换。

<svg width="1000" height="500">
  <g transform="translate(10,30)">
    <rect x="0" y="0" width="100" height="50" style="fill:black;"></rect>
    <line x1="20" y1="0" x2="20" y2="20" stroke="white" stroke-width="2"></line>
    <line x1="40" y1="0" x2="40" y2="20" stroke="white" stroke-width="2"></line>
    <line x1="60" y1="0" x2="60" y2="20" stroke="white" stroke-width="2"></line>
    <line x1="80" y1="0" x2="80" y2="20" stroke="white" stroke-width="2"></line>
  </g>
</svg>

https://jsfiddle.net/ksav/wq6mvv9v/

SVG：在子元素中绘制

1 个答案: