如何调整 SVG 及其中所有项目的大小？

Question

我需要调整 svg 和多边形的大小。如果我尝试更改 svg 的高度和宽度，它只是调整它的大小并切割多边形。这是代码：

 <svg height="248" width="406" id="svg1" class="svg" style="position: absolute; top: 92px; left: 685px;">
    <polygon points="174,0 406,104 197,248 0,126 " style="fill: red; stroke: purple; stroke-width: 1;" id="poly1" class="polygon">
    </polygon>
    </svg>

我不知道它是否有任何不同，但我使用 JQuery.

动态创建了 svg 和多边形

Answer 1

您想要的是将 viewBox 属性设置为 viewBox="0 0 406 248"。

这里定义了虚拟canvas的坐标系，当height和width后续发生变化时，会缩放而不是改变canvas的大小].

如何调整 SVG 及其中所有项目的大小？

How to resize an SVG and all items inside it?

html

jquery

svg

polygon