Posted at: 2022-10-20
JavaScript(jQuery)でSVG画像を操作する
![JavaScript(jQuery)でSVG画像を操作する-サムネイル](/_next/image?url=https%3A%2F%2Fcms.neightbor.net%2Fcms%2Fwp-content%2Fuploads%2F2022%2F10%2Fjs-icon-2.png&w=828&q=75)
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画像が読み込まれた後に処理が実行されるようにする必要があります。
こんな記事もオススメ
【セキュリティ】PHPの新たな脆弱性でサーバ破壊の危険性も ― 日常のメンテナンスの重要性
Read More【セキュリティ】あなたのサイトは大丈夫?JSライブラリ『Polyfill.io』が有害サイトへの誘導を行うマルウェアに…
Read More【Shopify】ブログカテゴリにメタフィールドでアップロードしたアイキャッチ画像を表示する方法
Read More【Shopify】paginateオブジェクトを使ってページネーションを実装する
Read More【Shopify】ShopifyでECサイトを公開しながらロリポップをメールサーバーとして使う
Read More【Shopify】ECサイト全体で呼び出せる自由なカスタムメニューを作る
Read More