Question

我正在尝试在d3中设置一些嵌套的SVG，这样我就可以在一个更大的画布中封装一些小图。

我的问题是，我似乎无法让内部SVG在宽度和高度方面正确调整大小。我试过这样的事情：

<svg width='500' height='500'>
    <svg width='200' height='200' x='10' y='10'>
        <rect x='10' y='10' height='20' width='20'></rect>
    </svg>
</svg>

外部SVG的尺寸正确，但内部SVG的高度和宽度均为10。（即它在矩形周围进行尺寸调整。）我想将其设置为每个200的高度和宽度。

如何使用HTML或其他方式完成此操作？

小提琴是here.

Answer 1

SVG的大小正确。如果你在背景中放置一个100％×100％的矩形，你可以看到。

<svg width='500' height='500'>
    <svg width='200' height='200' x='10' y='10'>
        <rect height='100%' width='100%' fill="orange"></rect>
        <rect x='10' y='10' height='20' width='20'></rect>
    </svg>
</svg>

Demo here

我不知道你为什么说这只是10x10。是什么让你这么想？

如何确定嵌套SVG的大小？

1 个答案: