英語からの翻訳： SVGでピザを調理する方法は？
この記事では、SVGのファンにアピールする低カロリーピザの調理方法を学びます。 ピザはsvg-testとおいしいトッピングで構成されます。
テストから始めましょう！
SVG生地
SVGを使用して生地を作る方が、通常の生地で作るよりもはるかに簡単です。 卵、小麦粉、牛乳などは必要ありません。 生地は放射状のグラデーションで構成されます。
<radialGradient id="doughGradient"> <stop class="dough" offset="0%"/> <stop class="dough" offset="80%"/> <stop class="brownish-side" offset="97%"/> <stop class="dough" offset="100%"/> </radialGradient>
テストに円形を与えます：
<circle id="dough" cx="310" cy="310" r="300" style="fill:url(#doughGradient)" />
次に、外部CSSで、グラデーションの停止色を定義します。
#doughGradient .brownish-side { stop-color: #ff9955 } #doughGradient .dough { stop-color: #ffeeaa }
完璧主義者は、円の塗りつぶしプロパティが外部CSSでレンダリングされない理由を尋ねますか？
#dough { fill: url(#doughGradient) }
これは簡単です。これは、Chromiumユーザーだけでなく、全員のピザです。 残念ながら、OperaとFirefoxはまだこのような循環リンクをサポートしていません。
Operaの愛好家を怒らせないために、SVG仕様のサポートは他のブラウザよりも数歩進んでいることに注意してください。レンダリング速度はすべて良好です。
SVG生地の準備ができました。
トッピング
サラミ
スモークソーセージは、一般的に北米ではペパロニと呼ばれ、ロシアとヨーロッパではサラミと呼ばれます。 実際、それらの違いはわずかであり、それらを区別することはかなり困難です。 この場合、円が必要です。
<circle cx="50" cy="50" r="50" class="pepperoni-base"/>
この円の上に、脂肪の特徴的な包含物を配置します。 それらの1つの例を次に示します。
<path d="M23,23 16,30C16,30 16,25 18,24 20,23 23,23 23,23z" class="pepperoni-inc"/>
そのような包含物がいくつかあるはずです。 複数の包含物の色が同じ場合、 dパラメーター内の1つのパス要素内に順番に配置できます。 次の数字のシーケンスは、文字zの後にのみ開始する必要があることに注意してください。
外部CSSで次の宣言を使用して、円を描くことができます。
#pepperoni .pepperoni-base { fill: #a02c2c; stroke-width: 2 }
脂肪質の含有物を設計するには、次のテンプレートを使用できます。
#pepperoni .pepperoni-inc { fill: #782121; stroke: none }
必要なのは、これらのインクルードの色とクラスの名前を考え出すことです。
これらのクラスの装飾を接続するには、識別子#pepperoniで g要素内のコンテンツをグループ化する必要があります。
結果はサラミの1つの輪です 。
トマト
トマトのないピザは何ですか？ 通常、トマトは複数の断片が置かれ、各断片に種子が点在する輪郭で構成されます。
だから概要：
<path d="M 107,52 A 52,48 0 0 1 3,52 52,48 0 1 1 107,52z" class="tomato-base"/>
フラグメントは次のようになります。
<path d="M56,16 57,48C57,48 63,31 70,37 76,44 64,50 64,50L92,48C104,46 96,35 85,23 73,11 55,4 56,16z" class="tomato-segment"/>
すべて1つのパス要素に記述することもできます。
トマトの種子は、断片に分割してパスに書き込むこともできます。
<path d="M62,38C62,38 59,33 61,31 62,30 63,31 63,31 64,34 62,38 62,38z" class="tomato-seed" />
シンプルなCSSを追加することで、トマト、スライス、シードに外観を与えることができます。
#tomato .tomato-base { fill: #ff333f; stroke: none } #tomato .tomato-segment { fill: #d40000; stroke: none } #tomato .tomato-seed { fill: #ffaaaa; stroke: none }
最後に、トマトはこのようになります。
オリーブ
オリーブのプロトタイプは、次のSVGコードを使用して作成できます。
<path id=”olive” d="M68,47C68,59 55,63 44,66 32,70 23,59 23,47 23,36 33,26 45,26 57,26 68,36 68,47z" />
さらに、 useを使用して、このプロトタイプの緑と黒のバージョンを作成できます。
<use id="greenOlive" xlink:href="#olive" /> <use id="blackOlive" xlink:href="#olive" />
オリーブの真ん中、石を手に入れたら-空。 したがって、次のCSSコードはプロトタイプの設計に役立ちます。
#olive { fill: none; stroke-width: 22; }
次に、緑と黒のバージョンに色を割り当てることができます。
#greenOlive { stroke: #7db000; } #blackOlive { stroke: #000; }
結果は、 SVGオリーブのペアです。
きのこ
キノコもピザに追加する必要があります。 プロセスを高速化するために、 Inkscapeベクトルエディターを使用することは理にかなっています 。
シャンピニオンの輪郭は次のように作成できます。
<path d="M 37,63 C 44,67 61,69 68,62 68,52 63,42 66,32 72,26 84,32 88,38 90,42 85,42 83,42 80,47 88,50 92,46 96,41 98,34 97,28 94,16 89,9 77,4 55,0 27,-4 9,13 -1,27 1,47 15,55 21,57 23,46 17,48 12,51 10,43 12,40 15,34 22,30 28,30 38,33 32,52 37,63 z" class="champignon-shape"/>
シャンピニオンにプレートを描くこともできます。
<path d="M11,45C11,30 31,22 50,21 70,20 90,26 89,39 77,31 69,39 66,33 61,25 22,34 11,45z" class="champignon-gills"/>
シャンピニオンをグループ化します。
<g id="champignon"></g>
そして、アウトラインとエラに色を割り当てます。
#champignon .champignon-shape { fill: #f6e5ae } #champignon .champignon-gills { fill: #957f66 }
SVGシャンピニオンの準備ができました 。
ピーマン
ピーマンプロトタイプを追加します。 また、Inkscapeを使用すると簡単に描画できます。
<path id="bellPepper" d="M 130,140 C 210,120 170,16 110,33 67,-9 31,30 26,35 3.8,57 14,89 28,110 25,140 64,220 130,140 z M 38,42 C 19,47 22,77 34,85 41,94 54,96 64,96 66,100 48,100 46,120 45,140 50,160 71,160 89,170 110,140 110,140 110,120 89,100 100,100 110,100 150,120 150,110 170,97 160,48 120,48 110,48 110,68 96,70 80,45 71,14 38,42 z"/>
これで、このプロトタイプを使用して、緑、赤、黄色のコショウを作成できます。
<use id="redBellPepper" xlink:href="#bellPepper" /> <use id="greenBellPepper" xlink:href="#bellPepper" /> <use id="yellowBellPepper" xlink:href="#bellPepper" />
唐辛子は中身が空です。 したがって、プロトタイプに次のCSSを定義します。
#bellPepper { fill-rule: evenodd }
パスにネストされたフラグメントは空でなければならないことをブラウザに伝えます。
コショウに色を割り当てることができます：
#redBellPepper { fill: #DA251D; } #greenBellPepper { fill: #008000; } #yellowBellPepper { fill: #ffcc00; }
3個のSVGコショウが出来上がりました 。
唐辛子
ピザにスパイスを加えるには、唐辛子を加えます。 彼の形は湾曲しています：
<path d="M2,17C2,17 20,22 33,23 65,26 52,29 101,23 138,21 196,15 241,12 257,11 256,40 246,41 171,49 68,48 33,37 21,34 2,17 2,17z" class="chili-pepper-body"/>
緑の尾：
<path d="M296,2C294,2 257,26 253,23 L250,14C234,25 244,30 249,40L253,32C256,34 316,1 296,2z" class="chili-pepper-tail"/>
グループに入れます：
<g id="chiliPepper"></g>
色を追加します。
#chiliPepper .chili-pepper-body { fill: #aa0000 } #chiliPepper .chili-pepper-tail { fill: #008000 }
その結果、 SVGペッパーを食べることができますが、非常に辛いです。
クッキングピザ
すべてのコンポーネントの準備ができたら、アセンブリを実行できます。
これを行うには、多くのuse要素が必要です。 たとえば、生地は次のように配置できます。
<use xlink:href="#dough"/>
または、 x、yパラメータを使用して少しシフトします。
サラミは次のようにレイアウトできます。
<use xlink:href="#pepperoni" x="130" y="130" />
トマト、オリーブ、マッシュルーム、ピーマンなど。
これで、 SVGピザの準備ができました。
結論
この記事の主な目標は、初心者のWeb開発者を惹きつけてSVGを使用することです。 SVGの使用はHTMLよりもはるかに簡単であり、結果は洗練された雇用者でさえも印象づけることができます。 さらに、いくつかの便利なトリックを示します。
1. 1つのプロトタイプを使用して、同様の要素を配置します。 これにより、リソースが節約されます。
2.同じセマンティックオブジェクト（トマト、マッシュルームなど）に属する図をグループ化します。
3.同じ形状のコンポーネントに異なる色を使用できる場合は 、 使用して新しいオブジェクトに色を割り当てます。