获取嵌入在 html 文件中的 svg 坐标的最佳方法是什么？答案

【问题标题】：What is be the best way to get coordinates of an svg embedded on an html file?获取嵌入在 html 文件中的 svg 坐标的最佳方法是什么？
【发布时间】：2011-11-30 03:49:35
【问题描述】：

我在 html 文件中嵌入了一个 svg，如下所示：

    <embed src="mysvg.svg" type="image/svg+xml" />

在 svg 文件中有一个 id 为“lot1a”的矩形，有什么方法可以获取 lot1a 的坐标并将其保存在变量中，并将其用作另一个 svg 文件的坐标。我的主要问题是，正如 Phrogz 所说，宿主 HTML（或 SVG）无法访问嵌入文件的 DOM。那我该怎么办？

【问题讨论】：

您希望拥有什么样的“访问权限”？你想达到什么目的？将 SVG 文件可视化显示为网页的一部分并使用 JavaScript 对其进行操作？您需要保存更改吗？在 HTML 页面中嵌入 SVG 数据有问题吗？
您认为您以前尝试过，或者您已经尝试过？请向我们展示您尝试过的代码。
当您说“获取坐标”时，您想获得相对于 HTML 元素的位置吗？或者你想在 SVG 的相同位置插入一些东西？您意识到 SVG 是可缩放矢量图形，SVG 图像的坐标不像 HTML 坐标那样直接映射到像素。

标签： javascript html svg jquery-svg

【解决方案1】：

This should work（至少在 Firefox 和 Opera 中）：

window.onload = function () {
    var svgel = document.getElementById('myembed');
    var svg;
    if (typeof svgel.getSVGDocument !== 'undefined') {
        svg = svgel.getSVGDocument();
    } else {
        svg = svgel.contentDocument;
    }
    var rect = svg.getElementById('lot1a');
    window.alert('x:' + rect.getAttribute('x') + ' y:' + rect.getAttribute('y'));
}

Chrome has a bug，但你可以try these workarounds。

【讨论】：

但是，如果矩形的代码是：它会得到哪个 x 和 y 属性呢？那是因为我用illustrator画了svg。
@LeiLeyba 你不会得到任何x 或y 属性，因为这些属性都不存在。如果您想解析路径，请使用提供的代码来回答您之前的问题。