試圖顯示的SVG標籤內的圖像URL

希望有人能看到我在做什麼毛病以下 - 我使用Codepen.io對於這一點，即：試圖顯示的SVG標籤內的圖像URL

HTML：

<h1>SVG Image Example</h1> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
</svg>

JS ：

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); 
svgimg.setAttribute('height','50'); 
svgimg.setAttribute('width','50'); 
svgimg.setAttribute('xlink:href', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg'); 
svgimg.setAttribute('x','50'); 
svgimg.setAttribute('y','50'); 
$('svg').append(svgimg);

不幸的是，我在上面的代碼中顯示的圖像URL沒有顯示。

謝謝。

來源

2016-04-15 tonyf

SVG本地屬性（不包括xlink：href）不共享SVG命名空間;

您應該使用這樣的

svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href' ,'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg');

代替svgimg.setAttribute（）

這裏是一個DEMO HERE

來源

2016-04-15 05:39:04

由於要動態設置圖像，你必須使用domElement.setAttributeNS()。通常情況下，SVG原生屬性不共享命名空間SVG，這就是爲什麼大小和位置屬性可以與domElement.setAttribute()設置，但是，xlink:href屬性是一個例外，所以我們需要明確有關設置的命名空間。

svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');

來源

2016-04-15 05:43:58

試圖顯示的SVG標籤內的圖像URL

回答

相關問題