在SVG元素（Raphael）中设置自定义属性

Question

在SVG元素（Raphael）中设置自定义属性

3

当我给SVG元素设置ID时

var circle = paper.circle(x, y, r);
circle.node.id = 'circle-id';

一切都很好，当我使用调试器浏览文档时，我可以看到预期的结果：

<circle cx="320" cy="240" r="4" fill="none" stroke="#000" id="circle-id" />

然后，我可以通过document.getElementById方法或jQuery获取此元素的ID。但是添加其他属性会失败。如果我尝试添加属性custom:

circle.node.custom = 'custom-attr';

我看不到任何效果。

Raphael可以添加哪些属性来操作SVG元素，以及如何添加任意属性？

- ivkremer

你为什么想要设置自定义属性？ - j0hnstew

@stewbydoo，我想让一些HTML元素与一些SVG元素进行通信。例如，在某些div上鼠标悬停时更改一些SVG元素的背景色，并在鼠标移出时将其改回。但是使用$('elem-elector').attr('fill', '')更改失败了。通过在SVG元素上存储original-color属性，可以轻松实现此功能。 - ivkremer

听起来你最好使用:hover 伪类，而不是自己实现。http://www.quirksmode.org/css/hover.html - Robert Longson

@Robert Longson，我需要的是将一些div hover链接到SVG元素上的某些变化。我有一些与SVG路径配对的divs，因此我不认为我可以使用CSS :hover声明。 - ivkremer

我的意思是，悬停在 div 上不会影响 div，而是会影响链接的 SVG 元素。 - ivkremer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex · Accepted Answer

node是一个DOM元素，id是元素上的标准属性，可快速读/写其值。使用setAttribute方法设置非标准属性。

circle.node.setAttribute('custom', 'custom-attr');