是对SVG def组件编辑

Question

我有一个defs组件的SVG，就像这样：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> 
    <defs> 
    <linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse"> 
     <stop offset="0" stop-color="#d4af37"/> 
     <stop offset="0.14" stop-color="#fefdfb"/> 
     <stop offset="0.27" stop-color="#d6b23f"/> 
     <stop offset="0.45" stop-color="#816e26"/> 
     <stop offset="0.59" stop-color="#d6b23f"/> 
     <stop offset="0.82" stop-color="#d6b23f"/> 
     <stop offset="0.91" stop-color="#fff"/> 
     <stop offset="1" stop-color="#d6b23f"/> 
    </linearGradient> 
    </defs> 
    <title>StickerBorder</title> 
    <rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> 
    <polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/> 
    <polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/> 
    <rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/> 
    <circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> 
    <text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text> 
</svg> 

我通过JavaScript附加几个孩子来此像这样：

<lineargradient id="glossgrad" x1="22.3" y1="342.88" x2="227.7" y2="-12.88" gradientunits="userSpaceOnUse"> 
    <stop offset="0" stop-color="#ff0000"></stop> 
    <stop offset="0.2" stop-color="#ff0000"></stop> 
    <stop offset="0.4" stop-color="#ff0000"></stop> 
</lineargradient> 

<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#glossgrad)"></rect> 

因此“glossgrad”被添加到defs元素，并且rect被添加到svg元素。我的问题是，新附加的rect根本没有出现。但是，如果我将rect的网址更改为原始lineargradient网址，则会显示该网址。

所以我的问题是，'defs'元素一旦有初始加载后不会更新？这是缓存还是某种东西？

Answer 1

我不知道如何追加新的线性渐变定义和rect元素。但要回答你的问题，动态附加新元素到svg defs并使用它们是没有问题的。

这里是一个工作示例：

var svg = document.getElementsByTagName("svg")[0]; 
 
var svgNS = svg.namespaceURI; 
 

 
createGradient(svg,'glossgrad',[ 
 
    {offset:'5%', 'stop-color':'#f60'}, 
 
    {offset:'95%','stop-color':'#ff6'} 
 
]); 
 

 
var rect = document.createElementNS(svgNS,'rect'); 
 
    rect.setAttribute('x',60); 
 
    rect.setAttribute('y',80); 
 
    rect.setAttribute('width',50); 
 
    rect.setAttribute('height',50); 
 
    rect.setAttribute('fill','url(#glossgrad)'); 
 
    svg.appendChild(rect); 
 

 
function createGradient(svg,id,stops){ 
 
    
 
    var grad = document.createElementNS(svgNS,'linearGradient'); 
 
    grad.setAttribute('id',id); 
 
    for (var i=0;i<stops.length;i++){ 
 
    var attrs = stops[i]; 
 
    var stop = document.createElementNS(svgNS,'stop'); 
 
    for (var attr in attrs){ 
 
     if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]); 
 
    } 
 
    grad.appendChild(stop); 
 
    } 
 

 
    var defs = svg.querySelector('defs') || 
 
     svg.insertBefore(document.createElementNS(svgNS,'defs'), svg.firstChild); 
 
    return defs.appendChild(grad); 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> 
 
    <defs> 
 
    <linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse"> 
 
     <stop offset="0" stop-color="#d4af37"/> 
 
     <stop offset="0.14" stop-color="#fefdfb"/> 
 
     <stop offset="0.27" stop-color="#d6b23f"/> 
 
     <stop offset="0.45" stop-color="#816e26"/> 
 
     <stop offset="0.59" stop-color="#d6b23f"/> 
 
     <stop offset="0.82" stop-color="#d6b23f"/> 
 
     <stop offset="0.91" stop-color="#fff"/> 
 
     <stop offset="1" stop-color="#d6b23f"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <title>StickerBorder</title> 
 
    <rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> 
 
    <polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/> 
 
    <polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/> 
 
    <rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/> 
 
    <circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> 
 
    <text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text> 
 
</svg>