How to get transform using Javascript?

Question

I want to get "transform" data below using Javascript.

<svg id="svgHarita" width="5025px" height="2159px" viewBox="0 0 5025 2159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform: scale(3) translate(45.5px, 122px);">

var x // output: scale(3)
var y // output: 45.5px
var z // output: 122px

Thanks, Regards

Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output. — mplungjan
– mplungjan, Commented Oct 10, 2018 at 5:57

mplungjan · Accepted Answer · 2018-10-10 06:01:02Z

2

getAttribute and Regex

var regex = /scale\((\d)\).*?translate\((.*?), (.*?)\)/
console.log(
  document.getElementById("svgHarita").getAttribute("style").match(regex)
);

<svg id="svgHarita" width="5025px" height="2159px" viewBox="0 0 5025 2159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform: scale(3) translate(45.5px, 122px);">

answered Oct 10, 2018 at 6:01

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hiren Vaghasiya · Accepted Answer · 2018-10-10 06:00:39Z

0

You can add simply using style.transform

document.getElementById("svgHarita").style.WebkitTransform = "scale(3) translate(45.5px, 122px)"; 
document.getElementById("svgHarita").style.msTransform = "scale(3) translate(45.5px, 122px)"; 
document.getElementById("svgHarita").style.transform = "scale(3) translate(45.5px, 122px)";

answered Oct 10, 2018 at 6:00

Hiren Vaghasiya

5,5341 gold badge13 silver badges25 bronze badges

4 Comments

mplungjan Over a year ago

I do not think that is what was asked

Hiren Vaghasiya Over a year ago

I think, he/she want to transfrom svg using css

mplungjan Over a year ago

I think he wants to get the values of scale and translates

Hiren Vaghasiya Over a year ago

Okey it will be

mplungjan · Accepted Answer · 2018-10-10 07:52:33Z

0

It's using js, will be better using some better regExp, but it does its job

let el = document.querySelector("#svgHarita")
let arr = el.style.transform.replace(/[\(\)translatescale,px ]/gi, " ").replace(/ +/gi, " ").trim().split(" ")
let x = arr[0]
let y = arr[1]
let z = arr[2]
console.log(x, y, z)

<svg id="svgHarita" width="5025px" height="2159px" viewBox="0 0 5025 2159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform: scale(3) translate(45.5px, 122px);">

edited Oct 10, 2018 at 7:52

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Oct 10, 2018 at 6:34

D3Portillo

3442 silver badges6 bronze badges

2 Comments

D3Portillo Over a year ago

it removes all text then leaves numbers and period, its replaced by " " , then we replace that " " " " s p a c e d " text to a "spaced" one, finally we split and get the array using the " " as splitter

mplungjan Over a year ago

Yes it is indeed simpler to use a well crafted RegEx :) - Also you lost the px

Collectives™ on Stack Overflow

How to get transform using Javascript?

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related