SVG：在子元素内绘图答案

【问题标题】：SVG: drawing inside a child elementSVG：在子元素内绘图
【发布时间】：2016-01-12 06:51:42
【问题描述】：

我正在使用 d3.js 库，需要在另一个子 svg 元素中绘制一些 svg 元素。例如，我在 svg 中有一个容器元素，它是一个“矩形”。我也想在那个“矩形”内画一些线。但我在查看这些行时遇到问题。

如果我将这些行添加到主 svg 容器，它工作正常。但是当我将这些线条添加到“矩形”时，这些线条不可见。我想，坐标是问题。

那么，谁能告诉我，在子元素内绘图时应该如何计算坐标？它会自动偏移它的父坐标吗？还是“矩形”有自己的坐标系？

【问题讨论】：

我假设您将 SVG 附加为 rect 的子 DOM，在这种情况下它不会显示。在它将显示的主 SVG 中添加新的 SVG。
就我而言，我只有一个 svg。层次结构是这样的（从父到子）： svg->border(a rect)-> 线条（没有显示出来）。但是，如果层次结构是这样的，svg->border 和 svg->lines，它就可以工作。
没错！ svg->border(a rect)-> 这些行这将永远无法工作...如果您在 rect DOM 中创建 svg 行，它将永远不会显示。如果要显示线条在矩形内，则需要相应地绘制平移或为线条提供适当的 x 和 y。您在矩形 dom 内制作线条 dom 的概念会使线条出现在里面是错误的……SVG 不能那样工作。
好的明白了。谢谢。我正在添加另一个关于渲染的问题。将在此处发布链接以供您考虑解释。再次非常感谢。
他是我的新问题。 stackoverflow.com/questions/34738746/…

标签： javascript d3.js svg

【解决方案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/

【讨论】：