如何在创建时将 ID 添加到 Raphael JS 元素

Question

我正在制作以下演示。为什么我无法将 id sample 添加到对象？我试图通过 css 控制元素样式，但它不起作用

var paper = Raphael("container", 500, 300); 
var dot = paper.circle(50, 50, 30).attr({ 
stroke: "#000", 
"stroke-width": 5 
}).data("id", "sample");

#sample{
  fill:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>

Answer 1

问题是 data() 不引用元素上的 svg 属性，而是引用 Raphael 元素上它可以访问的自定义数据。

如果您想设置 id 属性，您需要尝试以下方法之一...

在您正在使用的 attr({}) 定义中设置 'id'（但是，iirc 的某些版本的 Raphael 不能使用它），否则您需要做

dot.attr({ 'id', 'sample' }); // or try the following 

dot.node.setAttribute('id', 'sample'); // or 

dot.node.id = 'sample';

How to add ID to Raphael JS element on creation