Как получить преобразование с помощью Javascript?

Question

Я хочу получить "преобразовать" данные ниже, используя 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

Спасибо, С уважением

Answer 1

getAttribute и 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);">

Answer 2

Он использует js, будет лучше, если использовать какой-то лучший regExp, но он делает свою работу

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);">

Answer 3

Вы можете добавить просто используя 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)";