SVGを制御しよう-imgタグ編|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

SVGを制御しよう-imgタグ編

2016.10.13

こんにちわこんばんわ、ちばです。

今日のエナジードリンクはMON◯TERの白いやつです。

あんまりクドくなくて飲みやすいです。

そんなことはどうでもよくて、今回はSVGをimgタグで挿れたときの制御についてです。

imgタグでSVGを挿れる場合通常CSSでfillなどの制御が出来ないのですが、それを可能にする方法の紹介です。

SVGファイルをエディタで開こう。

まずは弊社ロゴをエディタで開きました


<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 326.3 68.4" style="enable-background:new 0 0 326.3 68.4;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:#595757;}
    .st1{fill:#5CB531;}
  </style>
  <g>
    <g>
      <g>
        <path class="st0" d="M125.3,11.1H91....(省略/
      </g>
    </g>
  </g>
</svg>

path部分は省略しましたが、CSSの記述があり色の指定がされているのがわかりますね。

SVGファイルを編集しよう。

ではこのstyleの中に以下の記述を足してみます。


@media (max-width: 600px){
  .st0{display:none;}
  .st1{stroke:#595757;}
}

600pxをブレークポイントとして、文字を消してロゴに枠線をつけるという記述をしました。

これでどのような動きになるか見てみましょう。ウィンドウを狭めてみてください。

無事に文字が消えたかと思います。

ブレークポイントの基準はimgタグの幅、つまり100%であれば親要素の幅を基準にする点だけ注意です。

まとめ

imgタグで挿れたいけどレスポンシブで表示を切り替えたいというのはよくあると思います。

この方法であれば簡単な変化を付けれるので是非試してみてください。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00