Javascript SVG循环中的图像不工作_Javascript_Jquery_Svg

Javascript SVG循环中的图像不工作

javascript jquery svg

Javascript SVG循环中的图像不工作,javascript,jquery,svg,Javascript,Jquery,Svg,我试图通过javascript为svg圆圈设置背景图像。如果我在中创建svg元素，并设置url以填充圆圈的arrtibute，如下所示 <script> function changingImage(e) { e.currentTarget.setAttributeNS(null, "fill", "url(#img1)"); } </script> <body> <svg height="100"

我试图通过javascript为svg圆圈设置背景图像。如果我在

中创建svg元素，并设置url以填充圆圈的arrtibute，如下所示

<script>          
    function changingImage(e) {
        e.currentTarget.setAttributeNS(null, "fill", "url(#img1)");
    } 
</script>

<body>
<svg height="100" width="100">

   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white" onmouseover='changingImage(event)'/>
   <defs>  
      <pattern id="img1" patternUnits="userSpaceOnUse"  width="100" height="100">
         <image  x="0" y="0" width="100" height="100" xlink:href="http://www.mysolutionzone.com/wp-content/uploads/Download-Nature-Sceneries-photos1.jpg" />
      </pattern>
   </defs>

</svg> 
</body>


函数更改图像（e）{
e、 currentTarget.setAttributeNS（null，“fill”，“url（#img1）”）；
}

但如果我用javascript创建所有SVG元素，它就不起作用了

<script>
 $(document).ready(function () {
            var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
            var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
            pattern.setAttributeNS(null, "id", "img1");
            pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
            pattern.setAttributeNS(null, "height", "100");
            pattern.setAttributeNS(null, "width", "100");
            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
            image.setAttributeNS(null, "x", "0");
            image.setAttributeNS(null, "y", "0");
            image.setAttributeNS(null, "height", "100");
            image.setAttributeNS(null, "width", "100");
            image.setAttribute("xlink:href", "http://www.mysolutionzone.com/wp-content/uploads/Download-Nature-Sceneries-photos1.jpg");
            //var imageElement = $('<defs><pattern id="image1" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"><image x="0" y="0" xlink:href="http://www.mysolutionzone.com/wp-content/uploads/Download-Nature-Sceneries-photos1.jpg"></image></pattern></defs>');
            pattern.appendChild(image);
            defs.appendChild(pattern);
            $('svg').append(defs);
        });

        function changingImage(e) {
            e.currentTarget.setAttributeNS(null, "fill", "url(#img1)");
        }
</script>  
<body>
<svg height="100" width="100">

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white" onmouseover='changingImage(event)'/>
</svg
</body>


$（文档）.ready（函数（）{
var defs=document.createElements（“http://www.w3.org/2000/svg“，“defs”）；
var pattern=document.createElements（“http://www.w3.org/2000/svg“，”模式“）；
setAttributeNS（null，“id”，“img1”）；
setAttributeNS（null，“patternUnits”，“userSpaceOnUse”）；
模式。刚毛属性（空，“高度”，“100”）；
setAttributeNS（空，“宽度”，“100”）；
var image=document.createElements（“http://www.w3.org/2000/svg“，”图像“）；
setAttributeNS（null，“x”，“0”）；
setAttributeNS（null，“y”，“0”）；
setAttributeNS（空，“高度”，“100”）；
setAttributeNS（空，“宽度”，“100”）；
image.setAttribute（“xlink:href，”http://www.mysolutionzone.com/wp-content/uploads/Download-Nature-Sceneries-photos1.jpg");
//var imageElement=$（''）；
模式。追加子对象（图像）；
defs.appendChild（模式）；
$（'svg'）.append（defs）；
});
函数更改图像（e）{
e、 currentTarget.setAttributeNS（null，“fill”，“url（#img1）”）；
}
  
看到了吗？谢谢你的帮助！