javascript - 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 将几个 child 附加到此:

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

因此 lineargradient“glossgrad”被添加到 defs 元素，rect 被添加到 svg 元素。我的问题是，新附加的 rect 根本没有出现。但是，如果我将 rect 的 url 更改为原始 lineargradient url，它就会出现。

所以我的问题是，“defs”元素在初始加载后是否不会更新？它是缓存的还是什么？

Answer 1

我不知道您如何附加新的线性渐变定义和矩形元素。但是要回答您的问题，将新元素动态附加到 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>