0

在我的页面中，我有一个带有 3 个路径的 SVG 图像，然后在另一侧有 3 个按钮。单击每个按钮时，我想将模式应用于我的 SVG 路径。

我没有完全运行的脚本。它更新了 SVG 结构，添加了所有必要的代码，但结果丢失了图像。

更新这里的演示：http: //jsfiddle.net/uncoke/756DS/

如果在调试时我复制新的 SVG 代码并在新窗口中打开它，我会看到我想要的结果。但在现场......它不会加载 img 模式。这是我脚本的核心：

      var svgns = "http://www.w3.org/2000/svg";

var img = document.createElementNS(svgns,'image');
          img.setAttributeNS(null,'height','536');
          img.setAttributeNS(null,'width','536');
          img.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href',pattern_url);
          img.setAttributeNS(null,'x','-81');
          img.setAttributeNS(null,'y','-81');
          img.setAttributeNS(null, 'visibility', 'visible');  
          

          def= document.createElementNS(svgns,'defs');
  
          pattern = document.createElementNS(svgns,'pattern');


          pattern.setAttributeNS(null,'id','img_pattern');
          pattern.setAttributeNS(null,'patternUnits','userSpaceOnUse');
          pattern.setAttributeNS(null,'width','600');
          pattern.setAttributeNS(null,'height','450');
          
          pattern.appendChild(img)

          def.appendChild(pattern)
          
      
          side_1 = document.getElementById('side_1');
          side_1.setAttributeNS(null,"fill","url(#img_pattern)")
          
          side_2 = document.getElementById('side_2');
          side_2.setAttributeNS(null,"fill","green")
          
          side_3 = document.getElementById('side_3');
          side_3.setAttributeNS(null,"fill","url(#img_pattern)")

在这个测试中，只有“填充”、“绿色”有效。

你能帮帮我吗？

4

0 回答 0