Question

在我的页面中，我有一个SVG图像和3路径然后在另一边我有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)")

在此测试中，只有“填充”，“绿色”才有效。

你能帮我吗？

将新IMAGE作为模式加载到SVG中

0 个答案: