実現したいこと
SVGアイコンの色をグラデーションにしたいのですが、やり方をどなたか教えて頂けないでしょうか。
<希望するグラデーションのカラー>
linear-gradient(to right, #fc3e4f 0%, #a21afb 100%);
<希望するSVGのコード>
<svg 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: 256px; height: 256px; opacity: 1;" xml:space="preserve">
発生している問題・分からないこと
gタグの際、全体を通してグラデーションにする方法が調べても分かりませんでした。
お手数をお掛けいたしますが、どうぞよろしくお願い致します。
該当のソースコード
SVG
1<希望するグラデーションのカラー> 2linear-gradient(to right, #fc3e4f 0%, #a21afb 100%); 3 4<希望するSVGのコード> 5<svg 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: 256px; height: 256px; opacity: 1;" xml:space="preserve"> 6<style type="text/css"> 7 .st0{fill:#4B4B4B;} 8</style> 9<g> 10 <path class="st0" d="M510.159,392.023l-45.586-57.326V93.61c0-11.662-9.458-21.121-21.121-21.121H68.539 11 c-11.662,0-21.111,9.458-21.111,21.121v241.087L1.834,392.023C0.64,393.518,0,395.368,0,397.288v25.373 12 c0,9.311,7.539,16.849,16.841,16.849h478.31c9.302,0,16.849-7.538,16.849-16.849v-25.373 13 C512,395.368,511.351,393.518,510.159,392.023z M77.219,102.29h357.554v202.607H77.219V102.29z M304.119,419.472h-96.238v-25.478 14 h96.238V419.472z" style="fill: rgb(75, 75, 75);"></path> 15 <rect x="132.064" y="245.315" class="st0" width="35.41" height="35.41" style="fill: rgb(75, 75, 75);"></rect> 16 <rect x="185.179" y="209.904" class="st0" width="35.41" height="70.821" style="fill: rgb(75, 75, 75);"></rect> 17 <rect x="238.295" y="192.199" class="st0" width="35.41" height="88.526" style="fill: rgb(75, 75, 75);"></rect> 18 <rect x="291.41" y="139.084" class="st0" width="35.41" height="141.642" style="fill: rgb(75, 75, 75);"></rect> 19 <rect x="344.526" y="174.494" class="st0" width="35.41" height="106.231" style="fill: rgb(75, 75, 75);"></rect> 20</g> 21</svg> 22
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
丸や四角の場合や、アニメーションを追加する場合は出てきたのですが、私のSVG知識がそもそも少なく、それらを元にgタグに適用することが出来ませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/06/12 07:29