CODEWITHSUNDEEP
javascriptjquerysvgmatrix
Morse
Morse

Reputation: 29

How to get the matrix elements of an SVG transform attribute

I got a svg code containing a <text> like that 

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

In order a plugin to work I need to create "x" and "y" attributes referring to the two last values of the matrix() . i.e 581 and 207

How to get the values in order to do something like jQuery(this).attr("x", *theValue*) ?

Upvotes: 1

Views: 917

Answers (2)

Robert Longson
Robert Longson

Reputation: 124179

The SVG DOM provides access to the matrix. No parsing, splitting or string conversion is required.

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>

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337627

You can use attr() to get the full matrix(...) string. However to pull out the final two values you'll need to manipulate the string a little. To do that you could use a regular expression, like this:

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>

Upvotes: 1

Related Questions