Как получить текущие значения из атрибута "d" пути SVG при применении свойства преобразования (чистый JavaScript)?

#javascript #svg #svg-transforms

Вопрос:

Я создаю мини-редактор SVG, я делаю это с помощью чистого JavaScript и хотел бы сгенерировать чистый SVG, поэтому существует ли формула, шаблон, логика, алгоритм и т.д. Для получения текущих значений командной строки (он же путь рисования) при применении свойства преобразования к пути svg? Любая документация, статья, учебник и т.д.? Я не смог найти результаты, которые объясняют что-то подобное или помогают решить возникшую у меня проблему, главным образом потому, что я не знаю, как я мог бы искать эту тему или ключевые слова, к которым относится эта тема. Например:

 <svg width="111" height="95" viewBox="0 0 111 95" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="my-path" transform="rotate(20)" d="M0.25 0L55 35L110.75 0V95L55 63L0.25 95V0Z" fill="#C4C4C4" />
</svg>

и в коде JavaScript есть что — то вроде этого:

 const myPath = document.getElementById('my-path');
console.log(myPath.getRealValuesOfAttributeD());

// or

const getCurrentValuesOfAttributeD = (svgPathElement) => {
   // the formula, pattern, logic, algorithm, etc., goes here.
};


console.log(getCurrentValuesOfAttributeD(myPath));

1. Что вы подразумеваете под «текущими значениями командной строки»? Вы имеете в виду текущее значение «d» — путь рисования?

2. Да, в документации MDN указывается «командная строка», по-видимому, она просто называется атрибутом «d» jaja

3. myPath.getAttribute(‘d’), но это не изменится при применении преобразования. Написание кода для этого было бы долгим и сложным и включало бы изменение самих команд, так как команды V или H должны были бы измениться на L. Если это то, чего вы хотите, вам нужно это реализовать, и дайте нам знать, если вы застряли на каком-то конкретном аспекте этого. Хотя не знаю, зачем ты это сделал.

Ответ №1:

Это введение в математику преобразования матриц для поворота, перевода и т. Д., Которые вам понадобятся для выполнения вычислений:

Как говорит Роберт, математика довольно сложна, и с такими случаями, как команда S, трудно справиться. Вам также нужно будет преобразовать каждую команду относительного пути в абсолютный путь, чтобы получить правильную математику.

Если вы делаете это, потому что боитесь беспорядка вложенных преобразований, то более простым способом сделать это может быть объединение вложенных преобразований путем умножения их матричных эквивалентов вместе, что приведет к одному матричному преобразованию для каждого элемента или группы. Это все еще куча математики, но на порядок проще, чем выполнять эти вычисления пути.