svg - 如何将 SVG 元素包装到 svg 元素中？

Question

我的 SVG 图形超出了窗口，并且没有滚动条。

那是因为 svg 元素是窗口的大小，而不是实际 svg 内容的大小。

是否可以在 svg 元素上设置一些属性以便包装内容（如 ag 元素）？

Answer 1

您可以在根 svg 元素上设置“viewBox”属性，以便它完全包含您的 svg，例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10020 30">
    <line x1="10" x2="10000" y1="10" y2="10" stroke-linecap="round" stroke="#1c94c4" stroke-width="3" />
</svg>

但也许你想要滚动条？在这种情况下，您可以将 CSS 宽度（或高度）设置为合适的值，例如：

<svg xmlns="http://www.w3.org/2000/svg" style="width:10020px; height: 32px">
    <line x1="10" x2="10000" y1="10" y2="10" stroke-linecap="round" stroke="#1c94c4" stroke-width="3" />
</svg>