如何使用 Javascript 进行转换？答案

【问题标题】：How to get transform using Javascript?如何使用 Javascript 进行转换？
【发布时间】：2018-10-10 05:46:12
【问题描述】：

我想使用 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

谢谢，问候

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并注明输入和预期输出。

标签： javascript jquery html transform

【解决方案1】：

getAttribute 和正则表达式

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

&lt;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);"&gt;

【讨论】：

【解决方案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)";

【讨论】：

我不认为这是被问到的
我想，他/她想用css从svg转换
我想他想得到规模和翻译的价值
好吧，会的

【解决方案3】：

它使用的是js，使用一些更好的正则表达式会更好，但它确实可以完成它的工作

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)

&lt;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);"&gt;

【讨论】：

它删除所有文本，然后留下数字和句点，将其替换为 " " ，然后我们将 " " " " s p a c e d " 文本替换为“间隔”文本，最后我们使用拆分并获取数组" " 作为分隔符
是的，使用精心制作的正则表达式确实更简单:) - 你也丢失了像素