SVG グラフィック エンコーディング_html/css_WEB-ITnose

svg: 品質を変えずに拡大縮小できます

1. svg には が含まれている必要があります
さまざまな形状を描画できます 長方形: 長方形、円: 円、楕円: 楕円、線: 線、ポリライン: ポリライン、ポリゴン: ポリゴン、パス: パス
円などのさまざまなグラフィックを描画するには、異なるラベルを使用する必要があります。 を使用してください
svg 形式で svg を保存できます
x ,yは開始座標を表します
fill:塗りつぶしの色、stroke:描画色、stroke-width:描画の幅(平たく言えば境界線)です
実際にはCSS3のcanvasに似ています

Rectangle :rect

<svg>  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

角丸長方形: rx、ry (円の中心の座標) の値を設定するだけです

<svg>  <circle id="circle"cx="100" cy="80" r="50" stroke="gray" stroke-width="10" fill="red">		</svg>

Circle: Circle

circle: は、x、y 属性がありません。円の中心が設定されました cx,cy

<svg class="grid-50">  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

Ellipse

ellipse: 楕円は実際には角が丸い長方形です

<svg >  <ellipse  rx=100 ry=30 cx=150 cy=60 fill="yellow" stroke="gray" />	</svg> 

線分: 線(2つの点が直線を決定します)

<svg>  <line x1="0" y1="0" x2="200" y2="20" fill="gray" stroke="gray" stroke-width="2" /></svg>

Polyline:po lyline (複数の座標点を設定しています)

(0,0) は無効であるため使用できないことに注意してください

<svg>  <polyline points="0,0  0,20  20,20  20,40  40,40"  fill="white" stroke="gray" stroke-width="2" /></svg> 

Polygon:polygon

もちろん、より複雑なグラフィックスの場合は、次の操作のみが必要です各点の座標を知っています

<svg >  <polygon points="50,50 0,100 100,100 50,50" fill="blue" stroke="gray" stroke-width="1">	  </svg> 			

Path: path (上記のグラフィックスはすべてパスで描画できます)

パス データには次のコマンドを使用できます:

M = moveto //座標を

L = に移動しますlineto //

に描く

H =

に水平線

V =

に垂直線

C = 曲線に

S = 滑らかな曲線

Q = 二次ベルジェ曲線

T = 滑らかな二次ベルジェ曲線

A = 楕円弧 / /Ellipse

Z = closepath //End path

コメント : 上記のコマンドはすべて小文字を使用できます。大文字は絶対位置を意味し、小文字は相対位置を意味します。

ルールに従って書かなければなりません

<svg>  <path d="M50 50 L200 50 L200 0 L50 0 Z" fill="blue" stroke="gray" stroke-width="2" />	</svg>

デモ: http://2.liteng.sinaapp.com/svg/index.html

元のアドレス URL: http://liteng.org /ノード/ 51