8

我正在使用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>
4

2 回答 2

14

更新

我在 GitHub 上提出了一个问题，看起来这将在下一个版本中修复。现在，在开发分支上，您可以使用Element.attr：

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

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

  1. 在撰写本文时，这在主（发布）版本中不起作用；和
  2. 所描述的直接访问底层 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");
于 2013-10-28T20:14:22.370 回答
5

使用 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 : "",    
    },
于 2014-01-06T03:43:39.707 回答