svg に外部の画像を使う

Webサイトなどのhtmlでsvgを使う際に、svg内にサーバー上の画像などを使う場合、xlink:href 属性で画像を指定する。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
    <g>
        <image x="0" y="0" width="200" height="100" xlink:href="images/xxxxx.png"></image>
    </g>
</svg>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA