javascript - jQuery将属性添加到SVG字符串

我正在尝试使用jQuery将ID属性添加到以下文本模板的'path'元素中。文本加载有RequireJS并以变量名引用（例如mySvg）。

目的是根据所需按钮的数量进行循环，并为每个“ path”元素（标记的底部附近）赋予唯一的ID，然后将文本附加到DOM元素上。

如果有人可以向我展示如何（使用jQuery）在标记为原始文本格式时（即在将其添加到DOM之前）添加ID属性和值，我将不胜感激。

提前谢谢了...

<?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>

最佳答案

您可以使用JQuery对片段进行操作，然后再将片段附加到DOM，如下所示。

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

// and then for example add it later

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

Demo here

关于javascript - jQuery将属性添加到SVG字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22050328/