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>

因此lineargradient“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>

SVG def元素是否可编辑

1 个答案: