Question

我正在尝试向SVG添加一些polyfill功能。为了做到这一点，我将一些javascript代码添加到SVG，在其中我创建一个canvas元素，在其上绘制，获取画布的dataURL并将其添加为SVG内的image元素。以下是SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   height="297mm"
   width="210mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg11346"
>
  <script type="application/ecmascript"> <![CDATA[
    var svg = document.querySelector('svg');
    svg.onload = function () {
      var canvas = document.createElementNS('http://www.w3.org/1999/xhtml','canvas');
      canvas.width = 50;
      canvas.height = 50;
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,50,50);
      ctx.fillStyle = '#0f0';
      ctx.fillRect(20,20,20,20);

      var img = document.createElementNS('http://www.w3.org/2000/svg','image');
      img.setAttribute('xlink:href', canvas.toDataURL());
      img.setAttribute('x',0);
      img.setAttribute('y',0);
      img.setAttribute('width',50);
      img.setAttribute('height',50);
      svg.appendChild(img);

    };
  ]]> </script>
  <rect
          style="fill:#f00;fill-opacity:1;"
          id="rect11482"
          width="100"
          height="100"
          x="200"
          y="0" />


</svg>

使用此代码，我希望在红色SVG rect元素旁边的左上角附近看到一个小的绿色矩形。但是当我在Chrome或Firefox中加载此SVG时，我看不到它。但是，当我检查DOM时，我发现image标记已添加到svg元素中。当我将它悬停在Devtools上时，我可以在页面上看到一个突出显示的矩形。这意味着image元素已添加，但未呈现。

要验证画布图是否正常工作，我从开发工具复制了image，然后手动将其插入SVG文件，禁用脚本代码并在浏览器中重新加载SVG。我可以看到预期的绿色矩形。

这告诉我，在动态插入图像元素之后，SVG实现可能不会刷新文档的渲染。我试图从脚本中动态插入一个原生的SVG元素（圆圈）并且显示正确。所以它可能只与图像元素有关。

有什么想法？我可以做些什么来触发重绘吗？有没有其他方法可以在SVG中显示动态生成的画布内容？

Answer 1

NameSpaced属性需要setAttributeNS（至少在SVG1.1中），xlink:href就是其中之一。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   height="297mm"
   width="210mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg11346"
>
  <script type="application/ecmascript"> <![CDATA[
    var svg = document.querySelector('svg');
      var canvas = document.createElementNS('http://www.w3.org/1999/xhtml','canvas');
      canvas.width = 50;
      canvas.height = 50;
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,50,50);
      ctx.fillStyle = '#0f0';
      ctx.fillRect(20,20,20,20);

      var img = document.createElementNS('http://www.w3.org/2000/svg','image');
      img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', canvas.toDataURL());
      img.setAttribute('x',0);
      img.setAttribute('y',0);
      img.setAttribute('width',50);
      img.setAttribute('height',50);
      svg.appendChild(img);


  ]]> </script>
  <rect
          style="fill:#f00;fill-opacity:1;"
          id="rect11482"
          width="100"
          height="100"
          x="200"
          y="0" />


</svg>

SVG脚本 - 动态插入图像失败

1 个答案: