如何动态缩放 svg 多边形以适应 24X 24 大小？答案

【问题标题】：How to scale a svg polygon dynamically to fit into 24X 24 size?如何动态缩放 svg 多边形以适应 24X 24 大小？
【发布时间】：2017-09-13 19:16:56
【问题描述】：

我的示例代码是

<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 区域。

提前致谢

【问题讨论】：

24 X 24 区域是什么意思？
我们需要调整多边形的大小并将其显示为 24x 24 像素的图标

标签： javascript svg resize scaling

【解决方案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>

【讨论】：

但是，如果我在多边形内有一个孩子，那么 getBBox();总是给我零，对此有任何黑客攻击
“多边形内的孩子”是什么意思？
一个多边形包围在另一个多边形内。
你没有让事情变得更清楚，因为你使用了几乎完全相同的词:) 我建议你问一个新问题。
我做了一个类似于 bbox 方法的工作，现在它工作正常。不知何故，如果多边形被任何其他多边形包围，bbox 方法返回零。

【解决方案2】：

因为您的观点是动态的。您可以动态计算多边形尺寸来设置视口的高度和宽度

var myPath = document.getElementById("p1")
var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;
document.getElementById("s1").setAttribute("viewBox", "0 0 " + h +  " " + w);

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

【讨论】：

我尝试将 viewbox 分别设置为 getBoundingClientRect() 的宽度和高度，但有时如果多边形的点高于 viewbox，多边形要么被裁剪，要么在 viewbox 中根本不可见。
这是不正确的。您应该使用getBBox() 而不是getBoundingClientRect。 w 和 h 变量在 viewBox 中也是错误的。