実現したいこと
aタグをホバーした時に子要素のsvg画像の線の色を変えたいです。
以下のようにHTML CSSを書いています。
HTML
1 <p class="btn buttonS"> 2 <a class="buttonS_link" href=""> 3 <svg class="download-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="27" viewBox="0 0 21 27"> 4 <image id="DLicon" width="21" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA2CAYAAACx1wu7AAACpUlEQVRoge2av2sUQRTHP5eLBynECCKKYBNBDqwlKJxwVjZBxCIixMJCUtj7J2gpgoJRC5VoIf7IiY2NxgTzB4gStLBRLKwEUU/jyFtn5WVx73ZmZ/dO2S8MN7v33psPM3szb+YWY4yUSWPMojHmhylHc7bdzCWG7JYEqDXrAjoKnAU28FtvgHcUI2lrv4p80X5eytSaGu5VY0zddUgcynienh0B6pb5FbBWUG8m9VpdS8/O9nMYKQksqZfAOXWvL+ygQEVnXGAHCYoL7KBBSYE9mTQaBlD+AnsZOK4NhgWUBKxwXdewZYJ+VfXtKTYCe97W18GOFs/3RwL6AtgD7AUe91gFV4HdFvZG5KNWiPsFrkpxOeKbGJT9jN4FjnnkE59qJsqhIj0ADucEqamp5aqkEil20kE7gfEMMTcDz0M/o4eAOVt/DzxKsfsJvHUJHHrot6bUc2uY5tGeqkBDqwINrf8edB8w4eE3YX2d5QM6DSzbfc+Ug9+U9Vm2MZzkA7rRfjaAO0A7g0/b2jYSMTLLB/QaMG/rcnDxsA9s29rEhxzzNkbhoLL3n1GwYz1gY8gxBTnjc37g+2OShk4AnQRsU9k0E5Ad6+MCKSnhF+BW3sS5YYxZUDG+pdQXrK1r/HuhEucucFT1bEN9F9c71qbrEb8WV0JM+ElYrTyQ6xRqZYphl9S9pVCQBN6FCtBB4IK9Ph0KkgK2ywJ2KnDMSFX2FFq+Qz8JbPP0/QCsuDr5gE5HK0U+yYpz2yWCz9BvygnpFcOnR68An4EtHr6ijz4j4gMqScVND79cqqan0KpAQ6sCDa1/CjTebDXVP83DoLraLK7JGf4T4IC9UeSLBa7aAeyyPk8FVDKhRXVAMGz6DrRk6CXlagHPSnyxIIuERZhawMovSO5II4+T/lEAAAAASUVORK5CYII="/> 5 </svg> 6 11資料ダウンロード はこちら<span class="yajirushi"></span></a></p>
css
1.buttonS {2 width: 285px;3 border-radius: 24px;4 padding: 0;5 background-image: linear-gradient(270deg, #ff7101, #ffb201);6 7}8 9.buttonS .buttonS_link {10 display: -webkit-box;11 display: -ms-flexbox;12 display: flex;13 -webkit-box-align: center;14 -ms-flex-align: center;15 align-items: center;16 -webkit-box-pack: center;17 -ms-flex-pack: center;18 justify-content: center;19 border: none;20 background: none;21 font-size: 14px;22 width: 256px;23}24 25.buttonS .buttonS_link img{26 margin-right: 14px;27}28 29.buttonS .buttonS_link:hover{30 color: #ff7101;31 border: 1px solid #ff7101;32}33 34.buttonS .buttonS_link:hover .download-icon-svg{35 stroke: #ff7101;36}37 38.buttonS .buttonS_link:hover .yajirushi{39background: #ff7101;40}41 42.buttonS .buttonS_link:hover .yajirushi:before{43 background: #ff7101;44}45
発生している問題
上記コードでaタグホバー時にsvg画像以外は期待通りのhover処理ができています。
しかし、svg画像だけ色が変わりません。。。（svg画像の線の色を変えたいです。）
試したこと
ネットの記事などを見るとsvg画像のソース自体にfill="#666" という記載がるというのも見受けますが、photoshopから書き出したsvgには<svg>内にfillの記載がありません。。。これは関係ないかもですが。
svg画像の色の指定は fill: #fff; で出来るようなのですが、svg class="download-icon-svg"にcssで色指定しても色が変わりません。。。。
css
1 .download-icon-svg{2 stroke: #ff7101;3/* svgの線の色は変わりませんでした。 */4}
どうすれば以下のsvg画像の線の色をaタグhoverに合わせて色が変えられますか?
HTML
1<svg class="download-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="27" viewBox="0 0 21 27"> 2 <image id="DLicon" width="21" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA2CAYAAACx1wu7AAACpUlEQVRoge2av2sUQRTHP5eLBynECCKKYBNBDqwlKJxwVjZBxCIixMJCUtj7J2gpgoJRC5VoIf7IiY2NxgTzB4gStLBRLKwEUU/jyFtn5WVx73ZmZ/dO2S8MN7v33psPM3szb+YWY4yUSWPMojHmhylHc7bdzCWG7JYEqDXrAjoKnAU28FtvgHcUI2lrv4p80X5eytSaGu5VY0zddUgcynienh0B6pb5FbBWUG8m9VpdS8/O9nMYKQksqZfAOXWvL+ygQEVnXGAHCYoL7KBBSYE9mTQaBlD+AnsZOK4NhgWUBKxwXdewZYJ+VfXtKTYCe97W18GOFs/3RwL6AtgD7AUe91gFV4HdFvZG5KNWiPsFrkpxOeKbGJT9jN4FjnnkE59qJsqhIj0ADucEqamp5aqkEil20kE7gfEMMTcDz0M/o4eAOVt/DzxKsfsJvHUJHHrot6bUc2uY5tGeqkBDqwINrf8edB8w4eE3YX2d5QM6DSzbfc+Ug9+U9Vm2MZzkA7rRfjaAO0A7g0/b2jYSMTLLB/QaMG/rcnDxsA9s29rEhxzzNkbhoLL3n1GwYz1gY8gxBTnjc37g+2OShk4AnQRsU9k0E5Ad6+MCKSnhF+BW3sS5YYxZUDG+pdQXrK1r/HuhEucucFT1bEN9F9c71qbrEb8WV0JM+ElYrTyQ6xRqZYphl9S9pVCQBN6FCtBB4IK9Ph0KkgK2ywJ2KnDMSFX2FFq+Qz8JbPP0/QCsuDr5gE5HK0U+yYpz2yWCz9BvygnpFcOnR68An4EtHr6ijz4j4gMqScVND79cqqan0KpAQ6sCDa1/CjTebDXVP83DoLraLK7JGf4T4IC9UeSLBa7aAeyyPk8FVDKhRXVAMGz6DrRk6CXlagHPSnyxIIuERZhawMovSO5II4+T/lEAAAAASUVORK5CYII="/> 3</svg> 4
0 コメント