嵌套 SVG 的大小调整如何工作？答案

【问题标题】：How does sizing work for nested SVGs?嵌套 SVG 的大小调整如何工作？
【发布时间】：2014-06-10 21:50:51
【问题描述】：

我正在尝试在 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 或 javascript 完成此操作？

小提琴是here.

【问题讨论】：

标签： svg

【解决方案1】：

SVG 大小正确。如果您在背景中放置一个 100% x 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。是什么让你这么认为？

【讨论】：

我正在查看 Chrome 调试器，它显示为 10 x 10。有趣的是，如果你在画布中放置一个大对象，画布会显示为比实际更大，即使它剪辑其内容和位置。