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 //输出：scale（3）
var y //输出：45.5px
var z //输出：122px

谢谢，问候

Answer 1

getAttribute和正则表达式

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

您可以简单地使用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)";

Answer 3

它正在使用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);">

如何使用JavaScript进行转换？

3 个答案: