更新

Question

我正在使用 Snap.svg API，我需要在CSS中选择三个图形用于样式设置。因此，为了区分它们，我需要给它们一个ID或类名。

这是我创建元素的方式：

var draw = Snap(100, 75);
c = draw.polyline(0,0, 50,75, 100,0, 0,0);
c.attr({
    fill: "black"
});

这是我得到的结果：

<svg height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline>
</svg>

这就是我需要的结果：

<svg id="graphic_1" height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline>
</svg>

Answer 1

更新

我在GitHub上提出了一个问题，看起来这将是fixed in the next release。目前，在开发分支上，您可以使用Element.attr：

var draw = Snap(100, 75);
draw.attr({ id: 'graphic_1' });

我将在下面留下原来的答案，因为：

在撰写本文时，这在master（发布）版本中不起作用;和
直接访问底层DOM节点所描述的技术可能对将来的其他人或使用旧版Snap.svg的技术有用。

没有记录，但内部Snap.svg将DOM节点存储在名为node的属性中。因此，您可以像这样设置画布的ID：

draw.node.id = 'graphic_1';

或者，如果您希望避免使用未记录的技术，则可以创建一个具有您想要首先的ID的元素并直接使用它：

<svg id="graphic_1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="75"></svg>

var draw = Snap("#graphic_1");

Answer 2

使用Snap版本0.2.0，.attr()方法将按预期工作，

var draw = Snap(100, 75);
draw.attr({id: "graphic_1"});

但是使用Snap版本0.1.0我修改了snap.svg.js（大约第4338行）以允许此操作。

var availableAttributes = {
    svg: {
        id : "",    
    },

在Snap.svg图形上设置ID属性

2 个答案:

更新