jQuery で操作する方法

  • img タグで読み込み:CSS/JS の適用不可
  • background-image プロパティ:CSS/JS の適用不可
  • HTML 内にインラインで svg タグを記述:CSS/JS を適用可能!!
  • object タグで読み込み:別ドキュメントとして扱われる (jQuery での操作時に contentDocument を jQuery オブジェクトに変換する必要がある)

参考:

SVG を css / js で操作するときに知っておきたいこと – Qiita

SVG を jQuery で操作する際にハマったので、書き留めておく。| 5 LOG

外部ファイル SVG を jQuery で操作する方法 | Gimmick log

SVG を jQuery・JavaScript で操作する – Qiita

How to use jquery in SVG (Scalable Vector Graphics)? – Stack Overflow

要素を作成する

参考:

jQuery で SVG を扱う | kamegu’s memo

HTML5 のインライン SVG と jQuery でお絵描き | スターフィールド株式会社

アニメーションさせる

参考:

jQuery の animate メソッドで fill、stroke が使えない時 | inoma-NOTE

パースする

参考:

does innerHTML work with XML Elements? – Stack Overflow

jQuery DrawSVG

参考:

jQuery DrawSVG [Official]

lcdsantos/jquery-drawsvg: Lightweight, simple to use jQuery plugin to animate SVG paths – GitHub

SVG アニメーションが5分で作れる!jQuery DrawSVG の使い方 | STAND4U

innersvg-polyfil

参考:

svg 要素でも innerHTML を使えるようにする polyfill | GUNMA GIS GEEK

dnozay/innersvg-polyfill – GitHub

innersvg-polyfill – npm

コメントを残す

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