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

Question

我正在尝试使用 jQuery 将 ID 属性添加到以下文本模板的“路径”元素。文本使用 RequireJS 加载并使用变量名(比如 mySvg)引用。

目的是根据所需按钮的数量进行循环，并为每个“路径”元素(标记底部附近)提供唯一 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>

Answer 1

您可以在将片段附加到 DOM 之前使用 JQuery 对其进行操作。

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

// and then for example add it later

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

Demo here