統合
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 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
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およびPHP / DBのケーキグラフ
確かに、 Google APIは非常に便利なものです。 ただし、信頼できるサービスではありますが、外部サービスであることを忘れないでください。 商業開発はリスクを冒すことを好まないため、グラフの生成は依然としてローカルである必要があります（静的でない場合）。から受信したデータに基づいて、phpを使用して画像を生成します調査の結果を表示するためのデータのデータベース（世論調査）。 GDライブラリはSWFのサイズも認識しているため、
バイナリファイルのみを生成します。 したがって、XMLを生成する必要があります：
header("Content-Type: image/svg+xml");
努力すべきことを見てみましょう（これまでのところ、 クールなアニメーションはありません ）...
カラー三角法
ループ内のパス要素を計算するには、少し数学を覚えておく必要があります。 円は楕円の特殊なケースであるため 、式には多くの共通点があり、これは非常に便利です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で最初に背景として入力するグラデーションを使用して、
さらに、特定のセクターの色を透明度でオーバーレイします。
/>
/>
/>
主な問題
ただし、境界セクターのペイントには問題が残っています。ケーキの半分に達する領域のみを、グラデーションの前面領域にペイントする必要があります。 この段階では、画像は次のようになります。
絶対テキスト
さらに、セクターのテキスト記述をどのように整理するかという疑問が生じますか？ Googleは、テキストが1行に収まらない場合でも、単にセクターの中央から線を引きます。 SVGでは、左上隅からテキストを配置する必要があります-幅がわからないため、これはすでに問題です。 2つの方法があります。テキストの相対的な配置を放棄してコールアウトカラーを作成するか、固定幅（モノスペース、クーリエ）のテキストを使用して、これに基づいてピクセル単位の長さとオンザフライでの位置を計算します。 幸いなことに、 text-anchor：endパラメーターに遭遇しました。これは奇妙な方法で、必要に応じてテキストを拡張しました。双方向性と未来
JavaScriptとの統合のおかげで、AJAXを使用してリアルタイムでそれに応じて画像を更新できます。 私の場合、これはユーザーが投票するときに必要であり、チャート上の投票の分布を更新する必要があります。また読む：
- Operaがサポートするオブジェクトとパラメーター
- カリエフCh.A. - 詳細なチュートリアル
- RPGゲーム用のSVG画像のコレクション
- Photoshopの効果
- Adobe IEレビューとプラグイン
イラストと使用例のある 元の記事