⬆︎SVGついてのまとめページはこちら。
fu.svg
こんにちは、「ふ」です。
webサイトに貼ってもぼやけずくっきり、ベクター画像のSVGファイル、便利ですよね。
これまでは同一フォルダ内にHTMLドキュメントとSVGファイルを置き、次のように呼び出していました。
HTML
これだと画像サイズや背景色はCSSで指定できるのですが、パス自体の塗り潰しの色を変えたりすることはできません。
すべてfu.svg
もし1つのSVGファイルで色違いのバリエーションをつけたり、状態によって透明度を変えたりすることができればとても汎用性が高まりますよね。
よし、今回はSVGファイルをCSSで操作する方法に挑戦してみましょう。
◼︎SVGファイルをCSSで操作できるようにするためには、HTMLファイルにSVGのコードを直接書き込む必要があります。
SVGファイルをテキストエディタで開いてコードをコピー。htmlの <body>〜</body>に流し込みます。
ブラウザ
ブラウザで表示できました。
HTML
イラレなどで書き出したSVGファイルであればレイヤー毎にidが付けられています。もし<svg>タグのところに表記が無い場合には、CSSでセレクトできるようにidやclass名をつけておきましょう。
◼︎SVGの編集をするには、普段のCSSで使っているものとは別にSVG専用のプロパティを使う必要があります。
まづはパスの塗り潰しの色を指定してみましょう。塗り潰しのプロパティは「fill」で指定します。
CSS
ブラウザ
おお、できましたよ。では線の色も変えてみます。
SVGオブジェクトのアウトライン(線)のプロパティは、「stroke」、太さは「stroke-width」で指定します。
ブラウザ
いい感じです。元のSVG画像からかなり変化しましたね。
不透明度のプロパティは「opacity」。値は0.0〜1.0の範囲で指定します。
ブラウザ
うまくぼやけました。
これ、アニメーションを仕込めそうですね!
今回はSVGファイルのプロパティをCSSで操作できるようになりました。その結果・・
ユーザの操作に合わせてボタンの色を変えたり、ヘッダーロゴにアニメーションを加えたり〜試したいことがいっぱい出てきて妄想が止まりませんね!しかもベクター画像なのでぼやけることなくくっきり表示されます。
今回はごく簡単な編集のみ紹介しました。
もっとSVGファイルのプロパティを調べて、さらにはJavaScriptも仕込めば、webページが一気に楽しいものになりそうです。
関連記事
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧