javascript - 如何通过删除变换属性来重新创建 svg 路径？

Question

我想通过删除转换属性来重新创建路径。 这是我的路径

<path d="M403.50030270807304 217.03163650993932 L686.287752708073 217.03163650993932 L686.287752708073 417.3799865099393 L403.50030270807304 417.3799865099393  Z" fill="none" stroke="#006400" stroke-miterlimit="null" stroke-width="1" pointer-events="all" id="bound_0" transform="rotate(90,403.50030270807304,217.03163650993932)" stroke-dasharray="5"></path>

我要删除 transform="rotate(90,403.50030270807304,217.03163650993932)" 并重新生成路径('d'属性)

有没有解决办法或者其他方法？

Answer 1

来自:

d="M403.50030270807304 217.03163650993932 L686.287752708073 217.03163650993932 L686.287752708073 417.3799865099393 L403.50030270807304 417.3799865099393  Z"

整理至小数点后两位，添加逗号作为“x, y”分隔符。

d="M403.5, 217.03 L686.29, 217.03 L686.29, 417.38 L403.5, 417.38  Z"

从下一个坐标中取出第一对坐标，并继续直到结束。

如果第一个坐标大于第二个，结果 * -1。

d="M403.5, 217.03 L686.29, 217.03 L686.29, 417.38 L403.5, 417.38  Z"
    403.5     -    686.29    =                                282.79  
           217.03     -    217.03 =                             0
                   686.29     -    686.29 =                     0
                           217.03    -     417.38 =           200.35
                                   686.29    -     403.5 =   -282.79
                                           417.38     -   417.38 = 0

将每次计算的结果依次放入路径中。 将 L(绝对行数)替换为 l(相对行数)。

d="M403.5, 217.03 l-282.79, 0 l0, -200.35 l282.79, 0 z"

缩短 v 和 h 的 lineto，因为它们是垂直线和水平线，并去掉 0。

d="M403.5, 217.03 h282.79 v200.35 h-282.79 z"

<小时/>

transform="rotate(90,403.5,217.03)"内容如下:

在 x = 403.5，y = 217.03 处，旋转 90 度。 403.5, 217.03 是路径的起点(原点)， 即它的一个 Angular 落。 旋转90度时，水平变为垂直，垂直变为水平。将h200.35更改为h-200.35

d="M403.5, 217.03 h282.79 v200.35 h-282.79 z"
d="M403.5, 217.03 v282.79 h-200.35 v-282.79z"

虽然现实是你有一个矩形。元素 rect (一个不言自明的元素)应该足够了，我强烈建议你使用它。 <rect id="bound_0" x="203.15" y="217.03" width="200.35" height="282.79" stroke="#006400" stroke-width="1" stroke-miterlimit="null" fill="none" pointer-events="all"/>