11

src私はsvgファイルを次のようなHTMLimg要素のとして設定できることを知っています：

<img src="mySVG.svg"/>

しかし、どういうわけか動的SVG要素をのとして設定できsrcますimgか？

<svg id="mySVGElement">
    ...
</svg>

<img src="?"/>
4

2 に答える 2

19

これはJavaScriptで実行できます。

var svg = document.querySelector('svg'),
    img = document.querySelector('img');

setImageToSVG(img,svg);

function setImageToSVG(img,svg){
  var xml = (new XMLSerializer).serializeToString(svg);
  img.src = "data:image/svg+xml;charset=utf-8,"+xml;
}​

SVG要素が動的（変更中）の場合、SVG要素が変更されるたびにこのコードを再実行する必要があります。

デモ： http： //jsfiddle.net/3PfcC/

または、別の<svg>要素を使用して最初のライブを参照する、@Robertの回答を示すデモを次に示します。

デモ： http： //jsfiddle.net/3PfcC/3/

<svg id="src" xmlns="http://www.w3.org/2000/svg" …&gt;
  <!-- Your SVG here -->
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" …&gt;
  <use x:href="#src" x="80" y="30" width="100" height="100" />
</svg>

デモでは、参照されたSVGドキュメントのサイズを変更したり変換したりできること、および参照がライブであることが示されています。元のドキュメントへの変更はすぐにに反映されます<use>。

于 2012-08-01T18:57:39.400 に答える