スケーラブルなベクトルグラフィックス

HTMLで描画する2つの主要な方法があります.その一つはキャンバスであり,もう一つはスケーラブルなベクトルグラフィックス(svg)である.キャンバスで描画するには、JavaScriptを使用してコードを完了する必要があります.SVGで描画するにはHTMLコードが必要です.このチュートリアルはSVGをカバーするだけです.私たちはすぐにキャンバスについて学ぶつもりですが.学習を始めましょう.
両方のSVGとキャンバスのグラフィックを作成するには、デカルト座標系が必要です.SVGではこのシステムは少し異なります.ご存知のように、通常のシステムではX軸とY軸を持っています.中心は点(0,0)である.SVGでもポイント(0,0)からスタートする.xの正軸とyの負軸は、画面の左上隅になります.そのため、Y軸のポイントは画面の下部になります.彼らは否定的ではない.


SVGで描画を開始する
スケーラブルなベクトルグラフィックスはXMLに基づいている.SVGタグを作成するだけでHTMLでそれらを使用できます.SVGタグはSVGグラフィックス用のコンテナとして機能する.我々は、その太さと幅を指定する属性を使用します.あなたが知っているかもしれないように、ウェブ開発に多くのスタイリングユニットがあります.SVGはデフォルトでピクセルを使う単位を指定しない場合、システムはピクセルを読み込むので、値にピクセルを指定する必要はありません.SVGの最も使用される図形は円、楕円、線、長方形、多角形である.ここでSVGグラフィックスについてのいくつかの例から始めましょう.すべてのSVGグラフィックスのために、我々は線を引くために「stroke」属性を使うことができます.属性の行の色を指定します.また、色で図形を塗りつぶすために色の値で“塗りつぶす”属性を使用することができます.
ドローイングサークル
まず最初にSVGサークルの描画を開始します.SVGでどんなグラフィックも描くことは本当に簡単で簡単です.上記のようにSVGタグはコンテナです.SVGの中で、我々は我々が望むグラフィックをつくります.この場合、サークルタグをSVGタグの子として円を作成します.次に、円の属性を指定できます.円の主な属性は、X軸上の中心である「CX」であり、Y軸上の中心であるCyでもある.円では、円の半径の大きさ“R”もあります.以下の例はSVGで円を描く方法を示しています.
楕円の描画
また、SVGで楕円を作成することもできます.彼らは2つのラジオを必要とする唯一の違いと円に似ています.X軸“RX”とY軸用のラジオ“RY”が必要です.以下では、SVGを使用して楕円の例を示します.また、我々は“ストローク幅”属性を持っていることに注意してくださいこれは、ストロークライン幅です.
ライン描画
また、SVGグラフィックスを使用して行をトレースすることも可能です.SVGではラインタグを使用するだけでSVGの行をトレースできる.知っているかもしれませんが、SVGの行の属性を設定する必要があります.行の属性は異なります.行の場合、xとyの値を設定する必要があります.X 1はX軸の始点であり、x 2は終点である.y軸と同じで、y 1は出発点、y 2は終点です.既に知っているかもしれませんが、行の色と幅については、ストロークとストロークの幅を使います.SVGの行の描画については、次の簡単な例を示します.
矩形の描画
また、SVGで長方形を描くこともできます.描く.長方形はとても簡単です.「rect」タグをSVGに適用するだけでよい.タグを適用した後に、いくつかの属性を設定する必要があります.「x」属性は長方形のx位置です、そして、「y」属性は長方形のy位置です.長方形の幅と高さを指定する必要があります.SVGに矩形を描画する方法を示した例があります.
丸い角
また、長方形に角を丸めることができます.それは非常に簡単です.長方形にcornesを丸めるためには、rectタグに“rx”属性を追加するだけでよい.“RX”属性はX値の半径です.以下の例で四角形の変換を見ることができます.
ポリ線の描画
“polyline”という言葉は多くの人にはわからない.SVGの中のpolylineは、点のセットによって、つくられる線以外の何でもない.ポリ線は開放形状を形成する.終了点は出発点に接続する必要はありません.我々は必要に応じて多くのポイントを追加することができます.ポリラインを作成するには非常に簡単です.“polyline”タグが必要です.次に、ポイント属性を追加します.その後、必要に応じて多くのポイントを設定します.それは奇妙な形になる可能性があります.そのためにどこでポイントを設定するかを知る必要があります.ポイントは(x,y)の形で覚えておいてください.あなたは、polylinesについて下記の別の例を見ることができます.
ポリゴン描画
また、SVGを使ってポリゴンを描画することもできます.多角形とポリラインは似ています.それらの唯一の違いは、ポリ線が開いている、そして、多角形が閉じられるということです.多角形の最初の点は最後に接続されます.また、いくつかの奇妙な形を作成することができますので、どこでポイントを設定するかを知る必要があります.SVGのポリゴンを作成する非常に便利なオンラインツールがあります.そのツールはClippy であり、必要な形を作成するのに非常に便利です.Clippyはピクセルの代わりに割合でより多くの作品が、結果はあなたが欲しいものです.ここではSVGのポリゴンについて別の例を示します.
ビューボックス
上で作成したすべての例では、ビューボックスを使用しませんでした.多くの場合、ビューボックスを使用する必要があります.SVGにビューボックスを追加するには、“Viewbox”属性をSVGに追加する必要があります.ボックスには4つの値があります.それらは“minx - x”、“miny - y”、“width”、“height”です.彼らはピクセルではない割合で認識してください.それらは順序でもあります.

<svg viewBox ="0 0 100 100">

<!-- Your Code Here -->

</svg>

"G "タグ
“G”タグは多くのSVG要素のコンテナとして機能します.複数のSVG要素を同じコンテナーに追加したい場合は、SVGに“G”タグを使用します.「G」タグの中で、我々は我々が望む多くの「SVG要素」をつくることができます.
結論
ここでは、SVGグラフィックスで最も基本的な形状を持っています.HTMLでグラフィックスを扱う間、彼らは非常に役に立ちます.あなたがいるならば.あなたがSVGグラフィックスの多くを必要とすることができるCSSアニメーションを学ぶことになります.私たちは別のチュートリアルでアニメーションについて学ぶつもりです.私たちは、彼らのMDN sectionでSVGグラフィックスに関する詳細な情報を見つけることができます. Moe's Linkを訪問していただきありがとうございますこのチュートリアルでは多くのことを学びます.