Отображение и изменение внешнего изображения SVG

Я пытаюсь отобразить и внешнее изображение внутри svg, а затем изменить его при нажатии кнопки. Я не могу получить фон, чтобы показать, и я не могу его изменить.Отображение и изменение внешнего изображения SVG

вот моя скрипка:

https://jsfiddle.net/bsp9601z/

<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%"); 

}

источник

2017-01-22 user713813

Я не слишком осведомлен о svg, но кажется, что вы не используете правильно https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g Нет такой вещи, как бирка, только . И у вас есть дополнительное закрытие – myfashionhub

@myfashionhub https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image – guest271314

Вы отсутствуете <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>

источник

2017-01-22 18:51:44 guest271314

@RobertLongson Хороший улов. Так как 'width' и' height' не изменяются от начальных значений, не нужно повторно устанавливать свойства на одни и те же значения. См. Обновленное сообщение. – guest271314

Отображение и изменение внешнего изображения SVG

ответ

Смежные вопросы