SVGアイコンをグラデーションにする方法を教えてください

実現したいこと

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タグに適用することが出来ませんでした。

補足

特になし

行動規範の内容に同意します

回答2件

一応こんな感じでも

svg
1<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">
2  <defs>
3  <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%" gradientUnits="userSpaceOnUse">
4      <stop offset="0%" stop-color="#fc3e4f" />
5      <stop offset="100%" stop-color="#a21afb" />
6  </linearGradient>
7  </defs>
8  <g fill="url(#grad1)">
9    <path class="st0" d="M510.159,392.023l-45.586-57.326V93.61c0-11.662-9.458-21.121-21.121-21.121H68.539
10        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
11        c0,9.311,7.539,16.849,16.841,16.849h478.31c9.302,0,16.849-7.538,16.849-16.849v-25.373
12        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
13        h96.238V419.472z" />
14    <rect x="132.064" y="245.315" width="35.41" height="35.41"  />
15    <rect x="185.179" y="209.904" width="35.41" height="70.821" />
16    <rect x="238.295" y="192.199" width="35.41" height="88.526" />
17    <rect x="291.41"  y="139.084" width="35.41" height="141.642"/>
18    <rect x="344.526" y="174.494" width="35.41" height="106.231"/>
19  </g>
20</svg>
21

投稿2024/06/12 07:18

編集2024/06/12 07:20

yambejp

総合スコア116468

gelsea

2024/06/12 07:29

ありがとうございます！こちらの方が他のSVGに適用する際、楽にできそうです！ありがとうございます！

行動規範の内容に同意します

ベストアンサー

<path> と <rect> は <mask> に入れて、white で描画する
新たに全体を描画する <rect> を用意し、<linearGradient> を参照してグラデーションをかける
そこに mask= で最初の<mask> を参照する

こんな感じでしょうか。

svg
1<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">
2<style type="text/css">
3.st0{fill:white;}
4</style>
5<defs>
6<linearGradient id="gradient">
7<stop offset="0%" stop-color="#fc3e4f" />
8<stop offset="100%" stop-color="#a21afb"  />
9</linearGradient>
10<mask id="mask" class="st0">
11	<path d="M510.159,392.023l-45.586-57.326V93.61c0-11.662-9.458-21.121-21.121-21.121H68.539
12		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
13		c0,9.311,7.539,16.849,16.841,16.849h478.31c9.302,0,16.849-7.538,16.849-16.849v-25.373
14		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
15		h96.238V419.472z"></path>
16	<rect x="132.064" y="245.315" width="35.41" height="35.41"></rect>
17	<rect x="185.179" y="209.904" width="35.41" height="70.821"></rect>
18	<rect x="238.295" y="192.199" width="35.41" height="88.526"></rect>
19	<rect x="291.41" y="139.084" width="35.41" height="141.642"></rect>
20	<rect x="344.526" y="174.494" width="35.41" height="106.231"></rect>
21</mask>
22</defs>
23<rect x="0" y="0" width="512" height="512" fill="url(#gradient)" mask="url(#mask)"/>
24</svg>