jQuery將屬性添加到SVG字符串

使用jQuery我試圖將ID屬性添加到以下文本模板的'path'元素。文本被加載了RequireJS並且被引用了一個變量名（比如mySvg）。jQuery將屬性添加到SVG字符串

其意圖是基於所需按鈕的數量創建一個循環，併爲每個'path'元素（標記底部附近）提供一個唯一的ID，之後將文本附加到DOM元素。

我會很感激大規模如果有人能告訴我（使用jQuery）如何添加ID屬性和值時的標記是在它的原始文本格式（即之前它被添加到DOM）。

提前感謝...

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="141px" height="58px" viewBox="0 0 141 58" enable-background="new 0 0 141 58" xml:space="preserve"> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="70" y1="62.5" x2="70" y2="-72.5"> 
    <stop offset="0" style="stop-color:#FFFFFF"/> 
    <stop offset="0.5667" style="stop-color:#3FA9F5"/> 
</linearGradient> 
<path class="svg button" fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="20" d="M137.5,43.5c0,6.627-5.373,12-12,12h-111 
    c-6.627,0-12-5.373-12-12v-30c0-6.627,5.373-12,12-12h111c6.627,0,12,5.373,12,12V43.5z"/> 
</svg>

來源

2014-02-26 user2190690

您可以使用jQuery他們被附加到這樣的DOM之前片段進行操作。

var e = $(yoursvg); 
e.find("path").attr("id", "abcd"); 

// and then for example add it later 

e.appendTo($('body'));

Demo here

來源

2014-02-26 18:51:46 user2591925

您好，感謝您的回覆。我將如何引用'路徑'元素？我認爲你提供的例子會爲根節點添加一個id屬性，而不是'路徑'。 – user2190690

我修復了原來的評論者代碼以符合您的請求並添加了演示。 –

嗨。非常感謝您的幫助。這回答了我的問題。 – user2190690

jQuery將屬性添加到SVG字符串

回答

相關問題