SVG Element.attributes 属性

SVG（可缩放矢量图形）是一种基于XML的图像格式，它支持交互式图像和动画。SVG元素具有一组属性，这些属性用于定义元素的外观和行为。其中一个重要的属性是attributes属性。

SVG Element.attributes属性是一个实时只读属性，它返回一个带有元素的全部属性的 NamedNodeMap 对象。NamedNodeMap 对象是一个无序键值对列表，其中键名为属性名，值为属性值。

语法

svgElement.attributes;

返回值

一个NamedNodeMap对象

示例

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

const circle = document.querySelector('circle');
const attributes = circle.attributes;
console.log(attributes.length); // 输出 4，因为有四个属性
console.log(attributes.getNamedItem('cx').value); // 输出 50，获取cx属性值
console.log(attributes.getNamedItem('fill').value); // 输出 red，获取fill属性值

在上面的示例中，我们选择SVG元素中的圆对象，并使用.attributes属性访问元素的全部属性。我们还使用NamedNodeMap的 .length 属性获取元素的属性个数，以及使用 .getNamedItem() 方法来获取特定属性的值。

兼容性

该属性可以在所有浏览器中使用。不过，其返回的NamedNodeMap对象的行为在各种浏览器中可能不同，请注意测试您的代码。