Как воссоздать путь SVG, удалив атрибут преобразования? - PullRequest
Новая
       36

Как воссоздать путь SVG, удалив атрибут преобразования?

1 голос
/ 16 января 2020

Я хочу воссоздать путь, удалив атрибут transform. Вот мой путь 

<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')

Есть ли какое-либо решение для него или любого альтернативный путь?

1 Ответ

0 голосов
/ 23 января 2020

От: 

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

Уберите до 2 десятичных знаков, добавьте запятые в качестве разделителей '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 (абсолютное lineto) на l (относительное lineto). 

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

Сократите lineto для v и h, так как это вертикальные и горизонтальные линии и уберите 0s. 

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 - начало (начало) пути, то есть один из его углов. При повороте на 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"/>

...