Question

我试图在svg内显示外部图像，然后在按钮点击时更改它。我无法获得展示的背景，也无法让它改变。

这是我的小提琴：

<head><meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<div id="slider"></div>
<button onclick="go()">change background</button>
<g id="backgroundImage">
  <image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" /></g>


<svg width="792pt" height="612pt" viewBox="0 0 792 612" enable-background="new 0 0 792 612"
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

</svg>
</svg>



function go(){

         var im = document.getElementById('backgroundImage');
                im.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',     'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
                im.setAttributeNS('http://www.w3.org/1999/xlink','width', "100%");
                im.setAttributeNS('http://www.w3.org/1999/xlink','height', "100%");

}

Answer 1

您缺少<svg>代码并选择<g>而不是<image>

<button onclick="go()">change background</button>
<svg>
<g id="backgroundImage">
  <image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
</g>
</svg>
<script>
  function go() {
    var im = document.getElementById('backgroundImage').querySelector("image");
    im.setAttributeNS('http://www.w3.org/1999/xlink'
    , 'xlink:href'
    , 'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
}

</script>

显示和更改外部SVG背景图像

1 个答案: