嘗試在SVG標簽中顯示圖像URL

Question

我為此使用Codepen.io，即：

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無法顯示。

Answer 1

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（）

這是一個演示

Answer 2

由於您是動態設置圖像，因此必須使用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');