如何在 JavaScript 中访问 SVG 元素属性？

【问题标题】：How to access SVG element attribute in JavaScript?如何在 JavaScript 中访问 SVG 元素属性？
【发布时间】：2011-08-27 09:26:10
【问题描述】：

我正在使用 Raphael 绘制 SVG 元素。

例如，如果我有 SVG 元素

<image x="710" y="425" width="10" height="10" preserveAspectRatio="none" href="images/car.png" style="cursor: pointer;"/>

如何在 JavaScript 中访问每个属性（此外，访问方法在 IE 中也应该是函数式的）

【问题讨论】：

【解决方案1】：

给图片一个id元素，例如

<image id="myImage" x="710" y="425" width="10" height="10" preserveAspectRatio="none" href="images/car.png" style="cursor: pointer;"/>

在通过 jQuery 访问它之后使用

$('#myImage').attr("width"); // getter
$('#myImage').attr("width", "400"); // setter

问候

【讨论】：

这将适用于 Firefox、Chrome、Safari（和 IE9）等，但是在旧版 IE 中，通过旧版 VML 生成图形以替代缺乏 SVG 支持 - 我希望这能失败。 Raphael.js 确实支持名为 .attr(key, val) 或 .attr(paramMap) raphaeljs.com/reference.html 的属性的“setter”，但我没有看到“getter” - 可能是由于尝试在浏览器中返回统一结果的复杂性。