💅🏻 🥕 👩🏿‍🤝‍👩🏽 SVGの概要と例-円グラフ 🏰 🚓 🚶🏽

SVG （ スケーラブルベクターグラフィックス）は、W3Cで開発されたEPS、アニメーション、ユーザーインタラクションに似たベクターグラフィックス形式です。内部では、ファイルはバイナリではなく、オブジェクト、その効果、および動作を記述する通常のXMLです。印刷などの品質を損なうことなく画像のサイズを変更する場合、一般的にベクトルグラフィックが必要です。 Webでは、ブロックサイズが％で、フォントサイズがemで、ロゴがSVGで設定されているゴム製のサイトでこれを確認しています。より良いモニターに移動-すべてが比例して変化しました。実用的な例は、 アイコン、グラフ、地図、ロゴ、インターフェースです。以下に、このような円グラフの例を示します。

統合

HTML-インライン

SVGは本質的にXMLであるため、XHTML構造でインラインスタイルですぐに記述できます。ただし、すでに見たように、XHTML1.1 doctypeは、ドキュメントのMIMEがもはやテキストプレーンではないことを意味します。ただし、IE6ロバは原則としてXHTMLを理解しません。一方、Firefoxは2つのパーサーを使用します。MIMEがapplication / xhtml + xmlでない場合、インラインSVGは認識されません。これは両刃の剣-IEとFFです。

/>

2番目の方法で最も実用的な方法は、オブジェクトタグを使用して既存のファイルを参照することです。のために
トラフィックの削減、ファイルを圧縮し、SVGZアーカイブを取得できます。

CSSとJavascipt

以下に示すように、SVGはHTML / XMLと非常に密接に関連しているため、CSSオブジェクトをCSSで記述するだけでなく、あらゆる種類のonclickなどのJavascript関数を記述することもできます。イベント（したがって、インタラクティブ機能）。 />

変換とエディター

SVGをpng / jpegに変換することもできますが、このためには実際にハンドラーの作業を行う必要があります。 PHPでは、 PEAR XML_svg2imageライブラリがこれを行います。ラスター画像をベクター画像に変換するサービスもあります（EPSはありますが）。編集者から-InkscapeとAdobe Illustrator、Corel Drawがあります。

グラフィックス

プリミティブ

描画は、空間の定義（2次元）、座標への分離（浮動小数点またはパーセントの単位）、およびプリミティブ構造の導入から始まります。

line-直線。 x1、y1、x2、y2-座標
ポリライン-破線。 points-点の座標の列挙
rectは長方形です。 x、y、幅、高さ、rx、ry-左上隅、寸法、コーナー半径
polygoneはポリゴンです。ポリラインのように見えます。 points-ポイントの座標
サークル-サークル。 cx、cy、r-中心座標と半径
楕円。 cx、cy、rx、ry-中心座標と半径
テキスト-テキストの碑文。改行がなく、絶対位置が設定されているため、非常に不便です。 x、y、font-family、font-size
tspan-テキスト要素内の単語を説明できます。たとえば、シフトまたは色付け
tref-指定されたIDを持つテキスト要素の再利用
<tref xlink:href="#myText" x="50" y="50">

textPath-ID

/>
<textPath xlink:href="#myPath" startOffset="50%"> Vinogradoff

によって関連付けられたパス曲線上のテキスト

/>
<textPath xlink:href="#myPath" startOffset="50%"> Vinogradoff

/>
<textPath xlink:href="#myPath" startOffset="50%"> Vinogradoff

画像-ビットマップ

<image image-rendering="optimizeSpeed" xlink:href"background.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" filter="url(#blurpane)"/>

オプションとスタイル

htmlのように、いくつかの行を必要とする人はほとんどいません-それらは塗りつぶされる必要があり、色を指定する必要があり、これはすべてパラメーターによって行われます

塗りつぶし、塗りつぶしルール -塗りつぶし。たとえば、「なし」、青、藍。
stroke、stroke-linecap、stroke-linejoin、stroke-dasharray、stroke-dashoffset、stroke-width -border、analog of border。一緒にストローク幅。
font-family、font-size、font-style、font- weight-テキスト要素のフォント
テキストアンカー

タグは充填に使用されます：

模様
linearGradient
radialGradient

これらのパラメーターはすべて1つのCSSアナログに結合し、インラインスタイルで記述することができます。
style="stroke-width:1; stroke:blue; fill:none"

ベジェグループと曲線

要素は互いにグループ化することができ、グループ化する必要があります。 テキスト要素内にtspanが設定されているという事実に加えて、要素によってグループ化が行われますベジエ曲線は、ポイントによって定義される滑らかな遷移線です。 SVGには、このためのパス要素があり、破線のように、座標が示されます。座標の近くには、線のプロパティを示す文字を使用できます。大きな文字は絶対位置を示し、小さな文字は相対的な位置を示します

Mは曲線の始まりです（x、y）
Z-曲線の終わり（座標なし）
L直線（x、y）
H-水平線
V-縦線
Qは1点での2次曲線です
T-前の点を反映した曲線の継続-繰り返しのリズムの描画を簡素化します
C-2点での3次の実際のベジェ曲線
SはCの簡易バージョンです
A-楕円曲線（半径、回転）

変革と機会

SVGのオブジェクトは、パラメーターとして指定されたフィルターを使用して、歪めたり、ねじったり、移動したりできます。

翻訳-オブジェクト転送
回転回転
スケール-スケーリング
scewX、scewY-歪み
マトリックス-混合変換

SVGは、照明効果のあるフィルターをサポートしています。また、静止画像に加えて、アニメーションやユーザーとの対話の可能性があります。たとえば、 Tetrisまたは高く評価されているMicrosoft TableとSilverlightはSVGでプログラムによって実装されており、本当に必要な場合はビデオ（ Ogg Theora = SVGT形式）も機能します。もちろん、すべてのブラウザに最新の機能がまだ実装されているわけではありませんが、Operaなどの先駆者が利用できます。

SVGおよびPHP / DBのケーキグラフ

確かに、 Google APIは非常に便利なものです。ただし、信頼できるサービスではありますが、外部サービスであることを忘れないでください。商業開発はリスクを冒すことを好まないため、グラフの生成は依然としてローカルである必要があります（静的でない場合）。から受信したデータに基づいて、phpを使用して画像を生成します
調査の結果を表示するためのデータのデータベース（世論調査）。 GDライブラリはSWFのサイズも認識しているため、
バイナリファイルのみを生成します。したがって、XMLを生成する必要があります： header("Content-Type: image/svg+xml"); 努力すべきことを見てみましょう（これまでのところ、クールなアニメーションはありません）...

2つの楕円のゴム配置から始めましょう。セクターは、小さな領域の勾配の量を減らすために、明らかに時計回りに減少する順序で移動します。セクターの色は、明らかにピースの数に比例して計算されます-これが問題が発生する場所です。結局のところ、セクターを2本の線と既存の楕円で埋めることはできません。図の輪郭を正確に示す必要があるため、パスを使用してすべてを個別に描画する必要がありますが 、楕円は必要ありません。

カラー三角法

ループ内のパス要素を計算するには、少し数学を覚えておく必要があります。円は楕円の特殊なケースであるため、式には多くの共通点があり、これは非常に便利です

x=cos(angle)*radius; y=sin(angle)*radius; //circle
x=cos(angle)*rx; y=sin(angle)*ry; //ellipse

x=cos(angle)*radius; y=sin(angle)*radius; //circle
x=cos(angle)*rx; y=sin(angle)*ry; //ellipse

楕円の場合、半径はそれぞれ長軸と短軸に置き換えられます。次に、データのパーセンテージ分布、 pathを持つセクターの度数を計算するサイクルを作成します。アーチの座標を計算するため、すべてのセクターの描画が密接になるように「次数シフト」を使用しますRGBキューブは、さまざまな方法でカットし、投影し、システムに入ることができます
CMYKやHSLのような座標。選択したドット色と白い頂点（255,255,255）の間でセグメントを分割すると、選択したオレンジ色の塗りつぶしのさまざまな色合いが得られます。

if ($intTotalValue) //
foreach((array) $Data as $key=>$recEntry){
$Data[$key]->percent=$recEntry->value/$intTotalValue;
$Data[$key]->color[0]=round($graph->fill[0]+($key/count($Data)*(255-$graph->fill[0])));
$Data[$key]->color[1]=round($graph->fill[1]+($key/count($Data)*(255-$graph->fill[1])));
$Data[$key]->color[2]=round($graph->fill[2]+($key/count($Data)*(255-$graph->fill[2])));

$Data[$key]->degree=360*$Data[$key]->percent;
$Data[$key]->start['x']=$graph->cx+round(cos(deg2rad($intDegreeShift)) * $graph->rx,3);
$Data[$key]->start['y']=$graph->cy+round(sin(deg2rad($intDegreeShift)) * $graph->ry,3);
$Data[$key]->end['x']=$graph->cx+round(cos(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->rx,3);
$Data[$key]->end['y']=$graph->cy+round(sin(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->ry,3);
$intDegreeShift+=$Data[$key]->degree; //increase degree shift

$boolIsLargeArc=$Data[$key]->degrees>180? 1 : 0;
echo "\n".'/>';
}

グラフを注意深く見ると、バルクが完了していることがわかります
SVGで最初に背景として入力するグラデーションを使用して、
さらに、特定のセクターの色を透明度でオーバーレイします。



/>
/>
/>

主な問題

ただし、境界セクターのペイントには問題が残っています。ケーキの半分に達する領域のみを、グラデーションの前面領域にペイントする必要があります。この段階では、画像は次のようになります。 graph_limit_problem_416

絶対テキスト

さらに、セクターのテキスト記述をどのように整理するかという疑問が生じますか？ Googleは、テキストが1行に収まらない場合でも、単にセクターの中央から線を引きます。 SVGでは、左上隅からテキストを配置する必要があります-幅がわからないため、これはすでに問題です。 2つの方法があります。テキストの相対的な配置を放棄してコールアウトカラーを作成するか、固定幅（モノスペース、クーリエ）のテキストを使用して、これに基づいてピクセル単位の長さとオンザフライでの位置を計算します。幸いなことに、 text-anchor：endパラメーターに遭遇しました。これは奇妙な方法で、必要に応じてテキストを拡張しました。

双方向性と未来

JavaScriptとの統合のおかげで、AJAXを使用してリアルタイムでそれに応じて画像を更新できます。私の場合、これはユーザーが投票するときに必要であり、チャート上の投票の分布を更新する必要があります。

また読む：

Operaがサポートするオブジェクトとパラメーター
カリエフCh.A. - 詳細なチュートリアル
RPGゲーム用のSVG画像のコレクション
Photoshopの効果
Adobe IEレビューとプラグイン

イラストと使用例のある元の記事

SVGの概要と例-円グラフ

統合