我正在使用Snap.svg API和我有三個圖形，我需要在CSS中選擇用於樣式目的。因此，爲了區分它們，我需要給他們一個ID或類名。在Snap.svg圖形上設置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>

來源

2013-10-28 João Belo

更新

我在GitHub上提出了一個問題，看起來這將是fixed in the next release。就目前而言，在發展分支，可以使用Element.attr：

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

我離開下方，因爲原來的答案：

在寫作時，這並不在主工作（版本）版本;和
所描述的用於直接訪問底層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-28 20:14:22

謝謝，真的很有幫助的答案。正是我正在尋找的 –

太棒了！ :)請記住，'node'屬性沒有記錄 - 如果您採用這種方法，請小心如果您在以後更新到更新版本的Snap.svg。 –

帶止動版0.2.0的.attr()方法會達到預期效果，

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

但是與對齊版本0.1.0我已修改snap.svg.js（約。 4338行），讓這個工作。

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

來源

2014-01-06 03:43:39

在Snap.svg圖形上設置ID屬性

回答

更新

相關問題