![](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe0fb51500d09081ae0096efac85c75d9d8dc4a6/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F653_svg.png)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
第3回 少し高度なSVG | gihyo.jp
前回はSVGの基本的な書き方を解説しました。今回は前回触れなかった座標変換・テキスト関連に、グラデー... 前回はSVGの基本的な書き方を解説しました。今回は前回触れなかった座標変換・テキスト関連に、グラデーションを解説していきます。 座標とグループ化 SVGにはg要素という複数の要素をまとめるための要素があります。このg要素によってグループ化した要素に同じ色を適用したり、座標変換(後述)をすることなどができます。 グループ化のサンプルコード(SVG) <g fill="#33ff33"> <rect x="40" y="40" width="30" height="30" /> <polygon points="0,0 43.3,25 0,50"/> </g> グループ化のサンプルコード(SVGDOM) // g(group)要素を作成 var g = document.createElementNS(SVG, 'g'); g.style.fill = '#3333ff'; var rect