Q&A
とりあえず、teratailでは外部サイトのURLは「リンクの挿入」を押して出てくる型に当てはめて頂けると助かります。
[リンク先の内容](URL)
Background Imageで出力しているSVGファイルの色をCSSで変えたいです。
下記サイトを参考に試しているのですが、background-imageで指定しているSVGファイルが表示されません。
https://jajaaan.co.jp/web-production/frontend/svg-background-image/
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23000" d="M..." /></svg>');
}
上記コードのd="M..." の箇所に
表示させたいsvgファイル、SVGコードの中にあるd属性をコピー、ペーストしました。
コピー後のコードは以下です。
CSS
1.contact_page .contact_page__inner .btn-privacy { 2 width: 350px; 3 color: #fff; 4 margin-bottom: 30px; 5background-image:url 6('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23000" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" /></svg>'); 7 background-repeat : no-repeat; 8 background-position: right 12% bottom 48%; 9 background-size: 3%; 10 background-color: #45403f; 11} 12コード
どこを修正すればbackground-imageで指定しているsvgファイルを表示させることができるでしょうか?
やりたいことはsvgファイルの色を白に変えたいです。
その場合、fill="%23000" の箇所を fill="%23fff"とすればいいのでしょうか?
回答1件
0
ベストアンサー
いまいち理由はよくわかってないのですが、viewBox 属性か width height 属性をちゃんと指定しないと background-size の指定で消えてしまうようです。
たとえば、
viewBox="x,y" → viewBox="0 0 200 400"
の変更で私の手元では見えるようになりました。
やりたいことはsvgファイルの色を白に変えたいです。
その場合、fill="%23000" の箇所を fill="%23fff"とすればいいのでしょうか?
はい。
投稿2021/03/24 06:05
総合スコア21679
ありがとうございます。
viewBox="x,y" → viewBox="0 0 200 400"
でこちらでも表示されました。
色の指定も無事に白にできました。
ありがとうございます。
あなたの回答
tips
プレビュー
