質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Q&A

解決済

1回答

184閲覧

初心者です。hoverした時、SVG形式のアイコンの色を変えるには

riita

総合スコア1

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

0グッド

0クリップ

投稿2024/02/03 13:39

実現したいこと

ホバーした時に色が変わる電話リンクボタンを作りたいと思っています。

発生している問題・分からないこと

SVG画像は初めて使うので調べながらコーディングしてみましたが
aタグをホバーした時にアイコンの色を変えることが出来ません。
その他テキストやbackgroundのカラーは変更できるのですが。
よろしくお願いいたします。

該当のソースコード

html

1<a href="tel:01234567890" class="tel-btn"> 2 <div class="flex-wrapper"> 3 <svg class="tel-icon" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 32px; height: 32px; opacity: 1;" xml:space="preserve"> 4 <style type="text/css"> 5 .st0{fill:#4B4B4B;} 6 </style> 7 <g> 8 <path class="st0" d="M33.014,235.258c-0.008-0.016-0.016-0.024-0.024-0.04l-0.016-0.017L33.014,235.258z" style="fill: rgb(110, 139, 91);"></path> 9 <path class="st0" d="M64.734,224.519c0.024-0.008,0.056-0.017,0.08-0.025l0.373-0.137L64.734,224.519z" style="fill: rgb(110, 139, 91);"></path> 10 <path class="st0" d="M500.766,141.118c-7.101-9.819-17.178-18.651-29.949-26.528v-0.007c-0.032-0.017-0.064-0.041-0.097-0.057 11 c-0.057-0.032-0.098-0.073-0.154-0.105l-0.008,0.008c-19.297-12.374-50.241-26.123-87.234-37.187 12 c-37.098-11.048-80.06-19.209-122.423-19.224c-1.618,0-3.267,0.008-4.917,0.04c-1.634-0.025-3.268-0.04-4.91-0.04 13 c-42.364,0.016-85.318,8.176-122.416,19.224c-36.985,11.056-67.92,24.805-87.209,37.187v-0.008 14 c-0.025,0.016-0.049,0.032-0.081,0.049c-0.056,0.04-0.122,0.073-0.178,0.114l0.008,0.007c-12.794,7.878-22.864,16.71-29.965,26.528 15 C4.092,150.96-0.008,162.025,0,173.316c-0.041,12.608,5.232,24.732,14.226,34.72c6.373,9.01,12.632,18.06,18.763,27.184 16 l0.065,0.088c6.527,9.592,17.292,14.687,28.145,14.68c3.915,0,7.878-0.68,11.695-2.014v0.016l-0.234,0.089l0.234-0.089l0.049,0.865 17 l-0.032-0.865l0.251-0.089c3.186-1.149,6.422-2.095,9.616-3.187l-0.582,1.699l-27.773,59.242 18 c-10.417,22.233-15.82,46.488-15.82,71.034v15.569c0.008,34.098,27.635,61.717,61.725,61.725H256h155.672 19 c34.105-0.008,61.717-27.636,61.725-61.725v-15.569c0-24.546-5.402-48.801-15.819-71.034l-27.774-59.242l-0.582-1.706 20 c3.195,1.092,6.422,2.038,9.6,3.186c3.922,1.408,7.975,2.087,11.97,2.087c10.878,0.016,21.619-5.103,28.146-14.671l0.032-0.049 21 c6.154-9.146,12.446-18.229,18.836-27.247c8.978-9.988,14.242-22.12,14.193-34.704 22 C512.016,162.017,507.908,150.953,500.766,141.118z M450.792,225.133c-1.173,0-2.37-0.194-3.542-0.614 23 c-19.216-6.94-38.724-12.828-58.442-17.672c-2.208-0.542-4.052-1.763-5.33-3.348c-1.278-1.593-1.95-3.421-1.95-5.386 24 c0.049-5.152,0.073-10.312,0.073-15.464c0-2.038,0-4.085-0.008-6.13v0.041c0-7.652-2.863-14.785-7.481-20.324 25 c-4.189-5.039-9.899-8.8-16.45-10.91c-0.251-0.122-0.429-0.186-0.599-0.259c-1.115-0.437-1.488-0.526-2.24-0.752 26 c-2.507-0.736-7.045-1.909-13.377-3.372c-18.965-4.327-52.708-10.934-81.969-10.984c-1.164,0-2.321,0.017-3.478,0.041 27 c-1.156-0.024-2.313-0.041-3.469-0.041c-21.457,0.017-45.234,3.6-63.95,7.19c-9.349,1.796-17.397,3.607-23.179,5.014 28 c-2.896,0.704-5.217,1.31-6.924,1.78c-0.866,0.243-1.553,0.436-2.216,0.655l-1.229,0.428c-0.178,0.073-0.38,0.154-0.647,0.275 29 c-6.576,2.111-12.309,5.88-16.507,10.942c-4.61,5.541-7.465,12.666-7.473,20.309v-0.032c-0.008,1.803-0.008,3.607-0.008,5.411 30 c0,5.386,0.024,10.78,0.081,16.167c-0.008,1.965-0.68,3.81-1.958,5.411c-1.286,1.585-3.13,2.814-5.33,3.348 31 c-19.702,4.828-39.185,10.716-58.378,17.638l-0.064,0.025c-0.008,0-0.008,0-0.016,0c-1.181,0.42-2.369,0.623-3.534,0.623 32 c-3.227-0.017-6.009-1.48-7.57-3.761c-6.342-9.422-12.796-18.764-19.379-28.056l-0.468-0.672l-0.55-0.582 33 c-6.099-6.68-8.346-12.746-8.387-18.755c0.016-5.281,1.828-11.105,6.527-17.648c4.674-6.503,12.286-13.475,23.05-20.058 34 l0.145-0.088l0.114-0.073c16.11-10.466,45.874-23.94,81.08-34.397c35.246-10.522,76.169-18.206,115.314-18.19 35 c1.568,0,3.146,0.016,4.715,0.041h0.202h0.219c1.544-0.032,3.114-0.041,4.691-0.041c39.145-0.016,80.077,7.675,115.331,18.19 36 c35.213,10.465,64.985,23.939,81.095,34.397l0.146,0.088l0.105,0.065c10.765,6.591,18.375,13.563,23.057,20.066 37 c4.699,6.542,6.511,12.366,6.519,17.639c-0.04,6.025-2.28,12.083-8.379,18.763l-0.55,0.591l-0.468,0.655 38 c-6.584,9.285-13.054,18.65-19.394,28.065l0.032-0.049C456.834,223.653,454.027,225.125,450.792,225.133z M63.448,376.688 39 c0-20.906,4.594-41.555,13.474-60.488l28.339-60.456l6.915-20.131c5.638-1.568,11.25-3.235,16.927-4.626 40 c7.555-1.852,14.081-6.106,18.74-11.873c4.57-5.645,7.336-12.859,7.441-20.583h0.032l0.008-0.324v-0.113v-0.072v-0.138 41 c-0.057-5.314-0.081-10.635-0.081-15.956c0-1.78,0-3.559,0.008-5.33v-0.032c0-1.423,0.518-2.968,1.755-4.464 42 c1.221-1.48,3.114-2.783,5.564-3.421l9.292-2.41v-0.105c7.295-1.763,18.489-4.23,31.178-6.398 43 c15.868-2.734,34.081-4.974,49.489-4.966c1.075,0,2.135,0.016,3.178,0.032l0.299,0.008h0.258c1.052-0.024,2.128-0.04,3.211-0.04 44 c18.698-0.016,41.466,3.308,59.243,6.737c8.613,1.658,16.038,3.324,21.4,4.618v0.097l9.293,2.418 45 c2.451,0.639,4.36,1.95,5.589,3.437c1.229,1.497,1.746,3.034,1.746,4.449v0.04c0.008,2.014,0.008,4.036,0.008,6.05 46 c0,5.088-0.024,10.166-0.073,15.245v0.218c-0.008,7.885,2.815,15.262,7.474,21.004c4.658,5.766,11.185,10.013,18.739,11.864 47 c5.669,1.392,11.29,3.058,16.919,4.634l6.924,20.122l28.34,60.464c8.88,18.933,13.474,39.581,13.474,60.488v15.569 48 c-0.008,10.223-4.109,19.369-10.797,26.074c-6.712,6.696-15.852,10.797-26.082,10.805H256H100.328 49 c-10.222-0.008-19.362-4.109-26.074-10.805c-6.696-6.712-10.797-15.852-10.805-26.074V376.688z M72.911,247.989v-0.025 50 c0.073-0.024,0.146-0.032,0.219-0.056L72.911,247.989z" style="fill: rgb(110, 139, 91);"></path> 51 <rect x="178.253" y="344.718" class="st0" width="38.878" height="38.878" style="fill: rgb(110, 139, 91);"></rect> 52 <rect x="178.253" y="291.517" class="st0" width="38.878" height="38.877" style="fill: rgb(110, 139, 91);"></rect> 53 <rect x="178.253" y="238.316" class="st0" width="38.878" height="38.869" style="fill: rgb(110, 139, 91);"></rect> 54 <rect x="236.565" y="344.718" class="st0" width="38.878" height="38.878" style="fill: rgb(110, 139, 91);"></rect> 55 <rect x="236.565" y="291.517" class="st0" width="38.878" height="38.877" style="fill: rgb(110, 139, 91);"></rect> 56 <rect x="236.565" y="238.316" class="st0" width="38.878" height="38.869" style="fill: rgb(110, 139, 91);"></rect> 57 <rect x="294.886" y="344.718" class="st0" width="38.87" height="38.878" style="fill: rgb(110, 139, 91);"></rect> 58 <rect x="294.886" y="291.517" class="st0" width="38.87" height="38.877" style="fill: rgb(110, 139, 91);"></rect> 59 <rect x="294.886" y="238.316" class="st0" width="38.87" height="38.869" style="fill: rgb(110, 139, 91);"></rect> 60 </g> 61 </svg> 62 <div class="btn-text"> 63 <p class="text1">電話でのお問い合わせ</p> 64 <p class="text2">0123 - 456 - 7890</p> 65 </div> 66 </div> 67 </a>

css

1.tel-btn { 2 border: solid 1px #6E8B5B; 3 border-radius: 50px; 4 padding: 0 49px; 5 margin-top: 50px; 6 color: #6E8B5B; 7 font-size: 24px; 8 font-weight: 500; 9} 10 11.tel-btn:hover { 12 color: #fff; 13 background-color: #6E8B5B; 14} 15 16.tel-btn:hover .tel-icon { 17 fill: #fff; 18}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

aタグ関係なく

.tel-icon:hover { fill : #fff; }

としても変化がありませんでした。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1.tel-btn:hover .st0 { 2 fill: #fff !important; 3}

それにしてもなぜ SVG 内で style 属性が指定されているのでしょう。

投稿2024/02/03 14:38

arcxor

総合スコア2857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

riita

2024/02/03 15:00 編集

回答ありがとうございます。 試したところ問題が解決しました SVG画像をダウンロードしてそのままコードを貼り付けました。 このstyle属性はcssに移すべきだったのでしょうか? 知識がなくてすみません。 また、!importantと書くことでhtmlで指定されたスタイルよりcssの指定が優先されたという認識でよろしいのでしょうか?
arcxor

2024/02/03 15:13

style 属性で fill プロパティが書かれているせいで、CSS の宣言ブロック内で fill プロパティを書いても無視されてしまっています。 この状態であっても !important 宣言をつければ CSS 宣言ブロックの方が優先されるのでスタイルが適用されます。
riita

2024/02/03 15:25

なるほど、ありがとうございます。 そもそもセレクタも間違えていましたし、本当に助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問