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

Question

実現したいこと

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

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

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

該当のソースコード

<a href="tel:[phone]" class="tel-btn">
                <div class="flex-wrapper">
                    <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">
                        <style type="text/css">
                            .st0{fill:#4B4B4B;}
                        </style>
                        <g>
                            <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>
                            <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>
                            <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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                c6.154-9.146,12.446-18.229,18.836-27.247c8.978-9.988,14.242-22.12,14.193-34.704
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                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
                                c0.073-0.024,0.146-0.032,0.219-0.056L72.911,247.989z" style="fill: rgb(110, 139, 91);"></path>
                            <rect x="178.253" y="344.718" class="st0" width="38.878" height="38.878" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="178.253" y="291.517" class="st0" width="38.878" height="38.877" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="178.253" y="238.316" class="st0" width="38.878" height="38.869" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="236.565" y="344.718" class="st0" width="38.878" height="38.878" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="236.565" y="291.517" class="st0" width="38.878" height="38.877" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="236.565" y="238.316" class="st0" width="38.878" height="38.869" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="294.886" y="344.718" class="st0" width="38.87" height="38.878" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="294.886" y="291.517" class="st0" width="38.87" height="38.877" style="fill: rgb(110, 139, 91);"></rect>
                            <rect x="294.886" y="238.316" class="st0" width="38.87" height="38.869" style="fill: rgb(110, 139, 91);"></rect>
                        </g>
                        </svg>
                    <div class="btn-text">
                        <p class="text1">電話でのお問い合わせ</p>
                        <p class="text2">0123 - 456 - 7890</p>
                    </div>
                </div>
            </a>

.tel-btn {
  border: solid 1px #6E8B5B;
  border-radius: 50px;
  padding: 0 49px;
  margin-top: 50px;
  color: #6E8B5B;
  font-size: 24px;
  font-weight: 500;
}

.tel-btn:hover {
  color: #fff;
  background-color: #6E8B5B;
}

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

試したこと・調べたこと

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

上記の詳細・結果

aタグ関係なく

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

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

補足

特になし

Answer 1

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

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

Comments

[riita]

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

[arcxor]

style 属性で fill プロパティが書かれているせいで、CSS の宣言ブロック内で fill プロパティを書いても無視されてしまっています。

この状態であっても !important 宣言をつければ CSS 宣言ブロックの方が優先されるのでスタイルが適用されます。

[riita]

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