ブログ

Blog

Posted at: 2022-10-20

JavaScript（jQuery）でSVG画像を操作する

WEBサイトを制作にSVG画像を利用する際、JavaScriptを使ってSVG画像の操作や加工をしたくなるときがあります。

今日は自分の備忘録目的としても、JavaScriptでのSVG画像操作方法をまとめておきます。
ただ、冗長になっちゃうんで一部jQueryを使ってる部分がありますので注意してください！

まずSVGを読み込むHTMLの実装は仮に以下のようにします。
（最低限SVG画像を表示するだけのHTMLです。）

<div class="svg-wrapper">
    <object type="image/svg+xml" data="sample.svg"></object>
</div>

次にJavaScriptを以下のように記述してSVGタグに対する操作を行えるようになります。

<script>
$(function(){
    // SVG画像ファイルを持つobjectタグ
    let obj = document.getElementsByTagName('object').contentDocument;

    // 操作対象のSVG画像ファイル
    let targSvg = $(obj).find('svg');
});
</script>

これで変数targSvgを操作することで、SVG画像ファイルの操作を行えるようになります。
例えばSVG画像ファイルに設定されているwidthやheightを取得したければ、以下のような感じです。

<script>
$(function(){
    // SVG画像ファイルを持つobjectタグ
    let obj = document.getElementsByTagName('object').contentDocument;

    // 操作対象のSVG画像ファイル
    let targSvg = $(obj).find('svg');

    // SVG画像ファイルのwidth, heightを取得
    let svgWidth = targSvg.attr('width');
    let svgHeight = targSvg.attr('height');
});
</script>

SVG画像ファイルに対して、新しいwidthやheightを設定したければ以下の通りです。

<script>
$(function(){
    // SVG画像ファイルを持つobjectタグ
    let obj = document.getElementsByTagName('object').contentDocument;

    // 操作対象のSVG画像ファイル
    let targSvg = $(obj).find('svg');

    // SVG画像ファイルにwidth, heightを設定
    targSvg.attr('width', '1000');
    targSvg.attr('height', '500');
});
</script>

記述が冗長になってしまうため、今回はjQueryを使った場合の書き方をしていますが、バニラのJavaScriptでも同じような方法でSVG画像を操作できるようになります。

注意点としては、ブラウザにSVG画像が読み込まれるタイミングと上記の処理順序によってはSVGタグを取得できないので、必ずSVG画像が読み込まれた後に処理が実行されるようにする必要があります。