ホームページ > 記事 > ウェブフロントエンド > SVGとは何ですか？ svg の一般的に使用されるメソッド (コード付き)

SVGとは何ですか？ svg の一般的に使用されるメソッド (コード付き)

不言オリジナル: 2018-08-08 13:50:128544ブラウズ

この記事の内容はSVGとは何か？よく使用される svg のメソッド (コード付き) は、必要な友人が参考にできることを願っています。

SVGとは何ですか?
SVG は Scalable Vector Graphics の略です
SVG は、Web 用のベクターベースのグラフィックを定義するために使用されます
SVG は、XML 形式を使用してグラフィックを定義します
SVG 画像のグラフィック品質は、拡大またはサイズ変更されても変わりません
SVG は、 World Wide Web コンソーシアムの標準
SVG は、DOM や XSL などの W3C 標準と統合されています

他の画像形式と比較して、SVG を使用する利点は次のとおりです:
SVG は多くのツール (メモ帳など) で読み取りおよび変更できます
JPEG や GIF 画像と比較すると、SVG はサイズが小さく、圧縮率が高くなります。
SVG はスケーラブルです
SVG 画像はどの解像度でも高品質で印刷できます
SVG は画質を損なうことなく拡大できます
SVG 画像内のテキストはオプションで検索可能です (地図の作成に最適です)
SVG は Java テクノロジで実行できます
SVG はオープンスタンダード

SVG ファイルは純粋な XML です

コード構造

422c3ebf87b39009776eca69aca0a0b8
6c04bd5ca3fcae76e30b72ad730ca86d
 
e388a4556c0f65e1904146cc1a846beeThis is an HTML paragraph94b3e26ee717c64999d7867364b1b4a3
 
ebb178b4b6c1a8cb89c091aaafc34159
725a7b21fa8cf5d6becde54634815ffa
d6fc9cdcb501326c88994993872f8701
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

SVG が提供する事前定義された形状要素の使用と操作:

4f5c91326734be5b874f0369b6cec59d は長方形および長方形のバリアントを作成するために使用できます

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

コードの説明:
1) Rect要素のwidth属性とheight属性は、長方形の高さと幅を定義できます
2) style属性はCSSプロパティを定義するために使用されます
3) CSSのfillプロパティは以下を定義します四角形の塗りつぶしの色 (RGB 値、色名、または 16 進値)
4) CSS のストローク幅プロパティは、四角形の境界線の幅を定義します
5) CSS のストロークプロパティ定義四角形の境界線の色
6 ) x 属性は、長方形の左の位置を定義します (たとえば、x="0" は、長方形からブラウザウィンドウの左側までの距離が 0px になるように定義します)
7) y 属性は、長方形の上部の位置を定義します長方形 (たとえば、y ="0" は、長方形からブラウザウィンドウの上部までの距離が 0px であることを定義します)
8) CSS の fill-opacity 属性は、塗りつぶしの色の透明度を定義します (有効な範囲は次のとおりです: 0 - 1)
9) CSS の stroke-opacity 属性は、ストロークの色の透明度を定義します (有効範囲は 0 - 1)
10) rx および ry 属性は、四角形の角を丸くすることができます。

30de22e41cb8eb8fbfdc1f091d85e4be タグは、円

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

を作成するために使用できます。コードの説明:
1) cx 属性と cy 属性は、円の点の x 座標と y 座標を定義します。 cx と cy を省略した場合、円の中心は (0, 0) に設定されます
2)r r 属性は円の半径を定義します。

d9b42b40d0fdc429c7c48871eea4816c タグは楕円を作成するために使用できます

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

コードの説明:
1)cx 属性はポイントの x 座標を定義します
2)cy 属性はポイントの y 座標を定義しますpoint
3)rx 属性は水平半径を定義します
4)ry 属性は垂直半径を定義します

15a73cc5312745b1b00671f6e690e36a タグは線の作成に使用されます

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

コードの説明:
1)x1 属性は開始点を定義しますx 軸上の線
2) y1 属性は、y 軸上の線の始点を定義します。3) x2 属性は、x 軸上の線の終点を定義します。 y 軸上のラインのグラフィックス

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

コードの説明:

1) Points 属性は、ポリゴンの各コーナーの X 座標と Y 座標を定義します

ce803ba1a4290bddb3ba9c6f57d4c9b4直線のみを含む形状を作成するために使用されます

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

コードの説明:

1) Points 属性は、各線分の各隅の x 座標と y 座標を定義します

98953a78f52873edae60a617ec082494 タグが使用されます以下のパス

<path d="M250 150 L150 350 L350 350 Z" />

を定義します。パスデータに使用できるコマンドは次のとおりです:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

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

SVG フィルター利用可能なフィルターは次のとおりです:

feColorMatrix

feComponentTransfer

feCompositefeConvolveMatrixfeDiffuseLighting

feDisplacementMap

feFlood
feGa us sianブラー
fe画像
feマージ
fe形態
feオフセット
feスペキュラー照明
fe
feタイル
fe乱流
feDistantLight
fePointLight
feSpotLight

ガウスぼかしガウスぼかし

1d24e586ca31f4bd05eca427459d98c7 标签用来定义 SVG 滤镜。1d24e586ca31f4bd05eca427459d98c7 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
1d24e586ca31f4bd05eca427459d98c7 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 标签内。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

代码解释：
1)1d24e586ca31f4bd05eca427459d98c7 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过 ad11e455a1398b09cace1648f731f602 标签进行定义的。fe 后缀可用于所有的滤镜
4)ad11e455a1398b09cace1648f731f602 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

bffa9ad35fc32d811cd3bf50cdea268e 可用来定义 SVG 的线性渐变

bffa9ad35fc32d811cd3bf50cdea268e 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 的内部。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

代码解释：
1)bffa9ad35fc32d811cd3bf50cdea268e 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3)bffa9ad35fc32d811cd3bf50cdea268e 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 6b22e4f809621b65b94f163c16b42e35 标签来规定。offset 属性用来定义渐变的开始和结束位置。

0649cc1cc16c8306177acf255def2211 用来定义放射性渐变

0649cc1cc16c8306177acf255def2211 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 中。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

代码解释：
1)0649cc1cc16c8306177acf255def2211 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 6b22e4f809621b65b94f163c16b42e35 标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变

a7121d48c316f728a47bbecf3a7063fd

  a621bf16da020740c635caa581263430
    46d89249be8c78da1fd3893f45bde870
    f4c3b6cd438b80e29d9f5a6bed69ce8e
    c463ca39b3fa7eed4fe47128078c87a4
  e283b8d45af6d064ef80ffba8eeee854

de28f444098d408d960da4dccff3a948

SVGとは何ですか？ svg の一般的に使用されるメソッド (コード付き)

関連記事