Javascript 我可以获得svg对象的平移/缩放吗？_Javascript_Svg

Javascript 我可以获得svg对象的平移/缩放吗？

javascript svg

Javascript 我可以获得svg对象的平移/缩放吗？,javascript,svg,Javascript,Svg,我正在写一个符号识别服务，我想扩展到完整的公式识别。这允许人们写一个公式，然后得到乳胶回来。一旦用户完成了编写，我就将编写的内容存储为带有模板的SVG <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf

我正在写一个符号识别服务，我想扩展到完整的公式识别。这允许人们写一个公式，然后得到乳胶回来。一旦用户完成了编写，我就将编写的内容存储为带有模板的SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="400"
   height="400"
   xml:space="preserve"
   viewBox="0 0 {{ width }} {{ height }}"
   preserveAspectRatio="xMidYMid meet">

{{ path }}
{{ dots }}
</svg>


{{path}}
{{dots}}

这包括通过

<object data="123456.svg"
        type="image/svg+xml"
        id="canvas"
        style="width:400px;height:400px;border:1px solid black;"></object>

（有关详细信息，请参阅）

现在我有了一些JavaScript代码，允许用户分割公式。但是，当SVG以viewBox/PreserveSpectratio为中心时，需要对该代码进行调整

如何获得调整代码所需的值（平移和缩放因子）

（我找到了

MDN SVG SVG DOM接口

，但当我将SVG包含在对象标记中时，这似乎不起作用。我不能将SVG包含在图像标记中，因为我需要处理SVG的内容。）

SVG元素有一个名为

getScreenCTM（）的函数

返回用于将SVG空间中的坐标转换为屏幕空间中的坐标的矩阵

你想做相反的方向。幸运的是，所有SVGMatrix对象都有一个名为

inverse（）

的函数，用于反转矩阵

您所需要做的就是从鼠标事件中获取

clientX

和

clientY

坐标，并在反转矩阵中运行它们。然后，您将获得该点对应的SVG坐标

<html>

<object data="324196.svg"
        type="image/svg+xml"
        id="canvas"
        style="width:400px;height:400px;border:1px solid black;" onclick="calc()"></object>

</body>

<script>

canvas.addEventListener("load",function(){
   document.getElementById("canvas").contentDocument.addEventListener("click", calc);
});

function calc(evt)
{
    var svg = document.getElementById("canvas").contentDocument.firstChild;

    var  point = svg.createSVGPoint();
    point.x = evt.clientX;
    point.y = evt.clientY;
    point = point.matrixTransform(svg.getScreenCTM().inverse());

    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", point.x);
    circle.setAttribute("cy", point.y);
    circle.setAttribute("r", "5");
    circle.setAttribute("fill", "red");
    circle.setAttribute("fill-opacity", "0.5");
    svg.appendChild(circle);
}

</script>

</html>


addEventListener（“加载”，函数（）{
document.getElementById（“canvas”）.contentDocument.addEventListener（“单击”，计算）；
});
函数计算（evt）
{
var svg=document.getElementById（“画布”）.contentDocument.firstChild；
var point=svg.createSVGPoint（）；
点x=evt.clientX；
点y=evt.clientY；
point=point.matrixTransform（svg.getScreenCTM（）.inverse（））；
var circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
圆.setAttribute（“cx”，点.x）；
圆.setAttribute（“cy”，点.y）；
圆.setAttribute（“r”、“5”）；
circle.setAttribute（“填充”、“红色”）；
circle.setAttribute（“填充不透明度”，“0.5”）；
svg.appendChild（圆）；
}

另外，对于您的

getContainedPaths（）

函数，如果执行路径[i].getBBox（）调用，您可能会发现返回结果很有用。：）非常感谢：-）顺便问一下，当你得到赏金时，你在乎吗？你的意思是得到“被接受”的绿色复选标记和/或选票吗？它总是首选。但是你不能强迫别人这么做，所以当他们不这么做的时候，你就没有必要生气。这不是我在这里回答问题的主要原因。我的大部分答案都在SVG标签中。它不是一个能产生很多点数或徽章的标签。：）不，我的意思不是接受投票。我是说赏金。偶尔我会给快速而好的答案一些奖励（在接受并投票后），以向作者表示我欣赏他们的作品。然而，对于像你这样拥有超过10公里积分的人来说，我不确定他们是否真的在乎何时能得到奖金。