Javascript 旋转路径后计算SVG维度

Javascript 旋转路径后计算SVG维度,javascript,svg,matrix,css-transforms,Javascript,Svg,Matrix,Css Transforms,问题是如何使用数学并仅在知道开始SVG信息的情况下,从没有旋转的开始SVG维度到有旋转的结束SVG维度。 基本上,从开始SVG到结束SVG,我需要执行-115.609度的旋转 以下是我的想法 从路径中检索每个点,然后对每个点应用旋转 启动SVG 下面是如何在浏览器中使用JS实现的 请注意,这适用于Firefox,但不适用于Chrome,也可能不适用于Safari,因为Chrome计算转换内容的边界框的方式 函数旋转角度 { //将图元旋转一个角度 elem.setAttributetrans

问题是如何使用数学并仅在知道开始SVG信息的情况下,从没有旋转的开始SVG维度到有旋转的结束SVG维度。 基本上,从开始SVG到结束SVG,我需要执行-115.609度的旋转

以下是我的想法

从路径中检索每个点,然后对每个点应用旋转

启动SVG


下面是如何在浏览器中使用JS实现的

请注意,这适用于Firefox,但不适用于Chrome,也可能不适用于Safari,因为Chrome计算转换内容的边界框的方式

函数旋转角度 { //将图元旋转一个角度 elem.setAttributetransform,旋转+角度+; //调用getBBox以获取更新的边界框 var bbox=elem.parentElement.getBBox; //使用BBox x和y将元素移回视口 elem.setAttributetransform,translate+-bbox.x+,+-bbox.y+旋转+角度+; //将新的宽度和高度转换为整数 var w=Math.ceilbbox.width; var h=数学.ceilbbox.height; //更新视图框 elem.ownerSVGElement.setAttributeviewBox,0+w++h; //更新SVG宽度和高度 elem.ownerSVGElement.setAttributewidth,w; elem.ownerSVGElement.setAttributeheight,h; } rotateAndJust document.querySelectorpath,-115.609; svg{ 背景:亚麻布; }
重点是什么?你想在这里实现什么?我想在从第一个svg旋转路径后找到公式,第一个svg和第二个svg之间的数学是什么?你为什么关心?您试图解决的问题是什么?我的问题很简单,我想将路径旋转-115.609度,并调整路径的位置和svg的高度/宽度。第二个svg只是为了说明我试图实现的目标,只是一个澄清。它在铬合金中工作。你只是没有得到最紧的边界框。