タップで読みたいところにジャンプします
デイトラ 第1回 実案件チャレンジ に挑戦
デイトラ 第1回 実案件チャレンジ 2024年3月11日09:00～3月15日21:00
実案件チャレンジとは、出された課題を期限内に実務レベルコーディングをして提出し、出した課題を経験豊富なWebディレクターやコーダーさんが品質チェックをしてくれるというもの。
なんて魅力的な課題なんだろうと取り込むことにした。
3月12日から取り組んだものの、時間内に完成することが出来ず提出は見送ることにした。
敗因は、今までやったものをまとめ方が下手なこと、最初の方にまとめながら課題に取り組んだこと、スニペットを使いこなせなかったことかな。
そして、SVGの表示にてこずった…。
SVG を表示する方法は４つ
img タグで表示させる
<img src="assets/icon/arrow-right.svg" alt="">背景画像として表示させる
<div class="Right-Arrow"></div>.Right-Arrow {
width: 100%;
height: 100%;
background: url("../icon/icon_cart.svg") no-repeat center center / contain;
}<object>タグを利用する
これは使ったことがないけれど、一応記載。
<object data="assets/icon/arrow-right.svg" type="image/svg+xml"></object><svg> タグを使う
SVGタグを使用して表示するのは個人的に好きではない。あくまで個人的にだけども…。
理由はHTMLのコードが煩雑になるから。下のコードがHTMLに入ってると読みにくくない？
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.02625 12.5H20.0262" stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M13.0262 5.5L20.0262 12.5L13.0262 19.5" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>svg の色を変更する３つの方法
svg ファイルの中のコードを変更
svgのファイルの中の「fill」や「stroke」の値、文字を変更して色を変更することが出来る。
でもこれだとホバーしたときに色を変えたり、アニメーションで色を変えたりすることは出来ない。
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.02625 12.5H20.0262" stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M13.0262 5.5L20.0262 12.5L13.0262 19.5" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>css のマスクプロパティを使う
HTMLに<svg> タグを使って書き、cssで色を変更する方法もある。
だが、svgタグやpathタグに名前を設置しなければならないようで、少し複雑な絵柄になるとややこしそうである。
これが一番簡単。
<div class="Right-Arrow"></div>.Right-Arrow{
width: 100px;
height: 100px;
mask: url("../icon/right-arrow.svg") no-repeat center center / contain;
background: skyblue;
}
コメント