質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

145閲覧

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

gelsea

総合スコア42

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2024/06/12 06:13

実現したいこと

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">

<style type="text/css"> .st0{fill:#4B4B4B;} </style> <g> <path class="st0" d="M510.159,392.023l-45.586-57.326V93.61c0-11.662-9.458-21.121-21.121-21.121H68.539 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 c0,9.311,7.539,16.849,16.841,16.849h478.31c9.302,0,16.849-7.538,16.849-16.849v-25.373 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 h96.238V419.472z" style="fill: rgb(75, 75, 75);"></path> <rect x="132.064" y="245.315" class="st0" width="35.41" height="35.41" style="fill: rgb(75, 75, 75);"></rect> <rect x="185.179" y="209.904" class="st0" width="35.41" height="70.821" style="fill: rgb(75, 75, 75);"></rect> <rect x="238.295" y="192.199" class="st0" width="35.41" height="88.526" style="fill: rgb(75, 75, 75);"></rect> <rect x="291.41" y="139.084" class="st0" width="35.41" height="141.642" style="fill: rgb(75, 75, 75);"></rect> <rect x="344.526" y="174.494" class="st0" width="35.41" height="106.231" style="fill: rgb(75, 75, 75);"></rect> </g> </svg>

発生している問題・分からないこと

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

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

一応こんな感じでも

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

総合スコア115505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gelsea

2024/06/12 07:29

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

0

ベストアンサー

  • <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>

投稿2024/06/12 07:00

int32_t

総合スコア21269

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gelsea

2024/06/12 07:05

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問