aタグをホバーした時に子要素のsvg画像の線の色を変えたい。

Question

実現したいこと

aタグをホバーした時に子要素のsvg画像の線の色を変えたいです。
以下のようにHTML　CSSを書いています。

    <p class="btn buttonS">
　　　 <a class="buttonS_link" href="">
        <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">
          <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="/>
        </svg>
        11資料ダウンロード はこちら<span class="yajirushi"></span></a></p>

.buttonS {
  width: 285px;
  border-radius: 24px;
  padding: 0;
  background-image: linear-gradient(270deg, #ff7101, #ffb201);

}

.buttonS .buttonS_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 14px;
  width: 256px;
}

.buttonS .buttonS_link img{
  margin-right: 14px;
}

.buttonS .buttonS_link:hover{
  color: #ff7101;
    border: 1px solid #ff7101;
}

.buttonS .buttonS_link:hover .download-icon-svg{
  stroke: #ff7101;
}

.buttonS .buttonS_link:hover .yajirushi{
background: #ff7101;
}

.buttonS .buttonS_link:hover .yajirushi:before{
  background: #ff7101;
}

発生している問題

上記コードでaタグホバー時にsvg画像以外は期待通りのhover処理ができています。
しかし、svg画像だけ色が変わりません。。。（svg画像の線の色を変えたいです。）

試したこと

ネットの記事などを見るとsvg画像のソース自体にfill="#666" という記載がるというのも見受けますが、photoshopから書き出したsvgには<svg>内にfillの記載がありません。。。これは関係ないかもですが。

svg画像の色の指定は　fill: #fff;　で出来るようなのですが、svg class="download-icon-svg"にcssで色指定しても色が変わりません。。。。

 .download-icon-svg{
  stroke: #ff7101;
/* svgの線の色は変わりませんでした。 */
}

どうすれば以下のsvg画像の線の色をaタグhoverに合わせて色が変えられますか?

<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">
          <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="/>
</svg>

Comments

[ypp]

<image>、画像だからでは？strokeは以下のタグでしか効果がありません。
<altGlyph>
<circle>
<ellipse>
<line>
<path>
<polygon>
<polyline>
<rect>
<text>
<textPath>
<tref>
<tspan>
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke

[Fukusuke0604]

こめんとありがとうございます。
<svg></svg>内が<image>だから。ということでしょうか？

photoshopデザインカンプからsvg画像で書き出しを行い、このようなsvgが書き出されたのですが、デザインカンプのアイコン自体に問題があるのでしょうか？
それとも書き出し方にもんだいがあるのでしょうか、、

なにか方法はありますか？

Answer 1

絵で描いたものは別の絵を用意しておいて切り替えるのが妥当
線として描いているのであればCSSで変更できるかもしれません

Comments

[Fukusuke0604]

ありがとうございます。
hoverした際に表示させたい色でアイコンを作り、hover時にhover前とhover後のアイコンの表示を切り替えることで実装できました！

HTML
<p class="btn buttonS"> <a class="buttonS_link" href="">
<img class="hover" src="/img/index/download_icon.png" alt="">
<img class="download_hover" src="/img/index/download_icon_hover.png" alt="">
資料ダウンロード はこちら<span class="yajirushi"></span></a></p>

CSS

.download_hover{
display: none;
}

.buttonS .buttonS_link:hover .hover{
display: none;
}

.buttonS .buttonS_link:hover .download_hover{
display: block;
}

Answer 2

SVGの中にPNGの画像を埋め込んでいるので、色を変更することはできません。

photoshopから書き出したsvgには

photoshop には詳しくないですが、パスとして描画できてますか?

Comments

[Fukusuke0604]

ありがとうございます。やはりパスで作られているデータでないといけないのですかね。
自分もphotoshop詳しくなく、一度デザインした方に相談してみます。