Парсинг атрибута transform SVG с помощью javascript

320
03 мая 2022, 07:40

Предположим, у нас есть строка преобразования SVG:

transform = "translate(6,5),scale(3,3)";

Есть ли гладкая функция регулярного выражения, которую мы могли бы использовать, чтобы преобразовать ее во что-то полезное?

Свободный перевод вопроса Parse SVG transform attribute with javascript от участника @Yarin.

Answer 1

Предполагая, что вы работаете в браузере, вы также можете использовать SVG DOM для анализа и декодирования строки преобразования.

var svgns = "http://www.w3.org/2000/svg";
function getTransformList(transformStr)
{
  // Создайте поддельный элемент <rect>, чтобы установить преобразование в
  var rect = document.createElementNS(svgns, "rect");
  rect.setAttribute("transform", transformStr);
  // Используйте DOM, чтобы получить список декодированных преобразований
  dumpTransform(rect.transform.baseVal);
}
function dumpTransform(transformList)
{
  for (var i = 0; i < transformList.numberOfItems; i++)
  {
    var transform = transformList.getItem(i);
    var m = transform.matrix;
    switch (transform.type)
    {
      case 2:
        console.log("translate("+m.e+","+m.f+")");
        break;
      case 3:
        console.log("scale("+m.a+","+m.d+")");
        break;
      case 4:
        console.log("rotate("+transform.angle+")");
        // TODO need to also handle rotate(angle, x, y) form
        break;
      case 5:
        // TODO skewX()
        break;
      case 6:
        // TODO skewY(()
        break;
      case 1:
      default:
        console.log("matrix("+m.a+","+m.b+","+m.c+","+m.d+","+m.e+","+m.f+")");
        break;
    }
  }
}
getTransformList("translate(6,5),scale(3,3)");

Свободный перевод ответа от участника @Paul LeBeau.

Answer 2

Вот изящный небольшой фрагмент кода, который может дать вам то, что вам нужно, он должен охватывать большинство сценариев в случае, если строка, которую вы собираетесь анализировать, имеет другое количество аргументов:

function parse (a)
{
    var b={};
    for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g))
    {
        var c = a[i].match(/[\w\.\-]+/g);
        b[c.shift()] = c;
    }
    return b;
}

Запуск этого:

parse('translate(6,5),scale(3,3.5),a(1,1),b(2,23,-34),c(300)');

Will result in this:

В результате получится:

{
    translate: [ '6', '5' ],
    scale: [ '3', '3.5' ],
    a: [ '1', '1' ],
    b: [ '2', '23', '-34' ],
    c: [ '300' ]
}

Свободный перевод ответа от участника @chernjie.

READ ALSO
Скролл до нужного места
javascript

Скролл до нужного места

Такой вот вопросда, не стандартный, но интересно, на что способен JS

 235
Как вывести строки содержащие слово?
javascript

Как вывести строки содержащие слово?

Как вывести строки которые содержат слово "error"?

 290
Проблема с Date на Node JS
javascript

Проблема с Date на Node JS

При создании экземпляра Date (new Date()), судя по документации, возвращается текущее локальное время, но мне возвращается время со сдвигом на -2 часа

 291
JS проверка на наличие слова в src картинки
javascript

JS проверка на наличие слова в src картинки

Есть html элемент img, в нём есть src='', как проверить src на содержание определённого слова? например слова home

 242