SVG、オブジェクト単位でCSSを適用させる。

〽️ 必要な箇所だけカスタマイズしたい！ 〽️ タグの構成を知り、selectできるようにする。 〽️ オブジェクト単位でCSSを使えた！ 〽️ 視認性の良いCSSを書きましょう。





⬆︎SVGついてのまとめページはこちら。

必要な箇所だけカスタマイズしたい！

こんにちは、「ふ」です。 前回はSVGファイルをインライン表記してCSSで編集する方法について紹介しました。

今度は、背景色を付けたSVGを描いてみます。

HTML

<svg version="1.1" id="text" xmlns="http://www.w3.org/2000/svg" ・・・ 「「３〜 略　〜」」

CSS

#text { background-color:coral; }

fu.svg

こんな感じになりました。
扨（さて）ここで、テキストの不透明度を下げて少し背景に溶け込ませたい。プロパティは「opacity」、値は0.0〜1.0の範囲で指定します。

CSS

#text { background-color:coral; 「「１opacity:0.2;」」 }

おやおや、背景を含めたSVG全体が透過されてしまいました。

背景はそのままに、テキストを描画しているパスのみをぼやかせたいところが、 これは目的にそぐわない。
SVG画像をパーツ単位でセレクトし編集する手法はないものか。



タグの構成を知り、selectできるようにする。


xmlタグの構成を見てみましょう。


fu.svg(HTML内にインラインで記述)

「「３//xml宣言」」 <?xml version="1.0" encoding=“utf-8"?> 「「３//SVGタグ」」 <svg version = ・・・・・・・・・>     「「３//１つ目のパス」」     <path d = ・・・・・・・・・・・/>     「「３//２つ目のパス」」     <path d = ・・・・・・・・・・・/> 「「３//タグを閉じる」」 </svg>

このうち、pathの部分はこのようになっています。

<path 「「１d」」 = ・・・・/>

ここでの「d」は「data」の意味で、<path>タグのHTML属性が記述されています。
普段よく使っているHTMLタグの例で言えば、

<h2 「「１id」」 = "・・・・・ "> <h3 「「１style」」 = "・・・・・">

これらの「id」や「style」にあたりますね。
ではCSSで呼び出せるように、「id」属性を付けましょう。

<pass 「「１id = "f"」」　 d = "・・・・・"/>

これで準備完了です。

　

オブジェクト単位でCSSを使えた！

ではCSSを指定してみます。最初に「#text」に指定した不透明度(opacity)はコメントアウトしておきましょう。

CSS

#text { background-color:coral; 「「３/*opacity:0.2;*/」」 } #text #f { 「「１opacity:0.2」」 }

ブラウザ

成功しました！背景や「u」のパスはそのままに、「F」のパスだけ透過されています。
これでまたSVGの表現幅が広がりましたね！







視認性の良いCSSを書きましょう。

今回はSVG全体、テキストの「F」のそれぞれにid名をつけてCSSを指定しました。
２つだけのidなら混乱することもないので、すべてグローバルチックに

CSS

#text {     } #f {     }

と記述しても編集に苦労することはないでしょう。

しかし実際のページ作成時には複数のSVGを貼り付けたり、１枚のSVGを使いまわしてそれぞれ別のカスタマイズをするケースも考えられます。そのとき、すべてのid名をグローバルチックに記述すると後からの変更作業がわけわかんなくなってしまう恐れがありますね。そこで、

「「３/*SVG*/」」 「「１#text_01」」 {     } 「「３/*path*/」」 「「１#text_01」」 .f {     } 「「１#text_01」」 .u {     } 「「３/*SVG*/」」 「「４#text_02」」 {     } 「「３/*path*/」」 「「４#text_02」」 .f {     } 「「４#text_02」」 .u {     }

このように、後から整理がつきやすいよう親子チックに記述することをお勧めします。またpathの識別にはidではなくclass名をつけることで、その都度新しいネーミングを考えなくても使い回すことができますね。
では、楽しいSVGライフを〜♪






関連記事


SVGアニメーション02、画像を宙に浮かべる。

2020.05.22
〽️ 要素を変形させるtransformプロパティ。










「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧