Как получить матричные элементы атрибута преобразования SVG

Question

Я получил svg-код, содержащий <text> вот так

<text transform="matrix(1 0 0 1 581 207)" font-family="'Arial'" font-size="120">TEXT</text>

Чтобы плагин работал, мне нужно создать атрибуты "x" и "y", ссылающиеся на два последних значения matrix(). т.е. 581 и 207

Как получить значения, чтобы сделать что-то вроде jQuery(this).attr("x", *theValue*)?

Answer 1

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

let m = document.getElementsByTagName('text')[0].transform.animVal[0].matrix;

console.log(`matrix: ${m.a} ${m.b} ${m.c} ${m.d} ${m.e}  ${m.f}`)

<svg>
    <text transform="matrix(1 0 0 1 581 207)" font-family="'Arial'" font-size="120">TEXT</text>
</svg>    

Answer 2

Вы можете использовать attr(), чтобы получить полную строку matrix(...). Однако, чтобы вывести последние два значения, вам нужно немного манипулировать строкой. Для этого вы можете использовать регулярное выражение, например:

var t = $('text').attr('transform').match(/(\d+)/g);
var m4 = t[4];
var m5 = t[5];
console.log(m4, m5);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
 <text transform="matrix(1 0 0 1 581 207)" font-family="Arial" font-size="120">TEXT</text>
</svg>