Javascript 如何动态缩放svg多边形以适应24 x 24的大小？

我的示例代码是

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

---

提前感谢，因为您的积分是动态的。可以动态计算多边形尺寸以设置视口的高度和宽度

var myPath=document.getElementById（“p1”）
var w=myPath.getBoundingClientRect（）.width；
var h=myPath.getBoundingClientRect（）.height；
document.getElementById（“s1”）.setAttribute（“viewBox”，“0 0”+h+”+w）
因为您的点是动态的。可以动态计算多边形尺寸以设置视口的高度和宽度


var myPath=document.getElementById（“p1”）
var w=myPath.getBoundingClientRect（）.width；
var h=myPath.getBoundingClientRect（）.height；
document.getElementById（“s1”）.setAttribute（“viewBox”，“0 0”+h+”+w）
您需要使用
getBBox（）
函数中的值，并用这些值更新您的
视图框


var myPath=document.getElementById（“p1”）
var mySvg=document.getElementById（“s1”）
var b=myPath.getBBox（）；
setAttribute（“viewBox”，[b.x，b.y，b.width，b.height].join（“”）
您需要使用
getBBox（）
函数中的值，并用这些值更新您的
视图框


var myPath=document.getElementById（“p1”）
var mySvg=document.getElementById（“s1”）
var b=myPath.getBBox（）；
setAttribute（“viewBox”，[b.x，b.y，b.width，b.height].join（“”）

24 X 24区域是什么意思？我们需要调整多边形的大小并在24 X 24像素中显示为图标。什么是24 X 24区域？我们需要调整多边形的大小并在24 X 24像素中显示为图标。我尝试将viewbox设置为getBoundingClientRect（）宽度和高度，但如果多边形的点高于viewbox，则有时多边形会被裁剪或在viewbox中完全不可见。这是不正确的。您应该使用
getBBox（）
而不是
getBoundingClientRect
。另外，
w
和
h
变量在viewBox中的循环方式也不正确。我尝试将viewBox分别设置为getBoundingClientRect（）宽度和高度，但有时如果多边形的点高于viewBox，则多边形会被裁剪或在viewBox中根本不可见。这是不正确的。您应该使用
getBBox（）
而不是
getBoundingClientRect
。另外，
w
和
h
变量在viewBox中的循环方式是错误的；总是给我零分，这是什么意思“多边形中的孩子”？一个多边形被另一个多边形包围。你没有把事情说得更清楚，因为你使用了几乎完全相同的词：）我建议你问一个新问题。我做了一个类似于bbox方法的工作，现在它工作正常。不知怎的，如果多边形被其他多边形包围，bbox方法返回零。但是，如果在多边形中有一个子对象，则getBBox（）；总是给我零分，这是什么意思“多边形中的孩子”？一个多边形包围在另一个多边形内。你没有说得更清楚，因为你使用了几乎完全相同的词：）我建议你问一个新问题。我做了一项类似于bbox方法的工作，现在它工作正常。不知怎的，如果多边形被任何其他多边形包围，bbox方法将返回零。