javascript - 如何动态缩放 svg 多边形以适应 24X 24 尺寸？

Question

我的示例代码是

<svg width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin"
                                 xmlns="http://www.w3.org/2000/svg">
                                <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"/>
                    </svg>

将从服务加载多边形点，我想调整和缩放多边形以适合 24 x 24 区域。

提前致谢

Answer 1

您需要使用 getBBox() 函数中的值并用这些值更新您的 viewBox。

var myPath = document.getElementById("p1")
var mySvg = document.getElementById("s1")
var b = myPath.getBBox();
mySvg.setAttribute("viewBox", [b.x, b.y, b.width, b.height].join(" "));

<svg width="24" height="24" id="s1">
  <polygon id="p1" points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"/>
</svg>