SVG へ

SVGとは何ですか?おそらく多くの人が SVG について聞いたことがあると思いますが、必ずしも SVG が何であるかを知っているわけではありません。 SVG (Scalable Vector Graphics 理解できない英語がたくさん ) XML 形式で定義されたスケーラブル ベクター グラフィックス Web 用のベクターベースのグラフィックスであり、画像を拡大したりサイズを変更したりしてもグラフィック品質が損なわれないことが特徴であり、同時に DOM と同様に W3C 規格でもあります。

ビットマップとベクターグラフィックスについてはここで説明されています:

私たちがよく見る絵であるビットマップは、店舗を平面上に密に並べたもの、つまり点で構成されています。また、拡大すると対応する箇所も拡大されてしまい、非常に不鮮明で粗い写真になってしまいます。

オブジェクト指向イメージまたは描画イメージとも呼ばれるベクター イメージは、線で接続された一連の点として数学的に定義されます。ベクター ファイル内のグラフィック要素はオブジェクトと呼ばれます。各オブジェクトは、色、形状、輪郭、サイズ、画面の位置などのプロパティを備えた自己完結型のエンティティです。解像度に関係なく、拡大しても画像が歪まないのが特徴で、グラフィックデザイン、文字デザイン、一部のロゴデザイン、レイアウトデザインなどに適しています。ベクター グラフィック形式には、CGM、SVG、AI (Adobe Illustrator)、CDR (CorelDRAW)、PDF、SWF、VML などが含まれます。

(追記: このエッセイの下の内容の一部は W3Cschool からのものです)

シンプルなSVG

リーリー

SVGコード分析:

最初の行には XML 宣言が含まれています。スタンドアロン属性に注意してください。このプロパティは、この SVG ファイルが「スタンドアロン」であるか、または外部ファイルへの参照が含まれているかを指定します。 standalone="no" は、SVG ドキュメントが外部ファイル (この場合は DTD ファイル) を参照することを意味します。

2 行目と 3 行目は、この外部 SVG DTD を参照しています。 DTD は「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」にあります。この DTD は W3C にあり、許可されているすべての SVG 要素が含まれています。

SVG コードは、開始タグ <svg> と終了タグ </svg> を含む <svg> 要素で始まります。これがルート要素です。幅と高さのプロパティは、この SVG ドキュメントの幅と高さを設定します。 version 属性は使用される SVG バージョンを定義し、xmlns 属性は SVG 名前空間を定義します。

SVGの<circle>を使用して円を作成します。 cx プロパティと cy プロパティは、円の中心の x 座標と y 座標を定義します。これら 2 つのプロパティを省略した場合、ドットは (0, 0) に設定されます。 r 属性は円の半径を定義します。

ストローク プロパティとストローク幅プロパティは、図形の輪郭がどのように表示されるかを制御します。円の輪郭を幅 2 ピクセルに設定し、黒い境界線を付けます。 fill プロパティは、形状内の色を設定します。塗りつぶしの色を赤に設定します。

終了タグは SVG 要素とドキュメント自体を閉じます。

注: すべての開始タグには終了タグが必要です。

SVGの利点

SVG は多くのツールで読み取り、変更できます (メモ帳でも簡単に開いて変更できます)
SVG は JPEG や GIF 画像よりもサイズが小さく、圧縮率が高くなります。
SVGはスケーラブルです
SVG画像はどの解像度でも高品質で印刷できます
SVGは画質を損なうことなく拡大できます
SVG 画像内のテキストはオプションで検索可能です (地図の作成に最適です)
SVG は Java などのテクノロジーで実行できます
SVG はオープンスタンダードです
SVG ファイルは純粋な XML です

SVG ファイルは、<embed>、<object>、または <iframe> タグを使用して HTML ドキュメントに埋め込むことができます。

SVG のコードは HTML ページに直接埋め込むことも、SVG ファイルに直接リンクすることもできます。

長方形<長方形>

リーリー

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度

• style 属性用来定义 CSS 属性

• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

• CSS 的 stroke-width 属性定义矩形边框的宽度

• CSS 的 stroke 属性定义矩形边框的颜色

• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）

• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）

• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

• CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

• rx 和 ry 属性可使矩形产生圆角。

圆形 <circle>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;">
  stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)

• r属性定义圆的半径

椭圆 <ellipse>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="240"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="220"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:purple"</span><span style="color: #0000ff;">/&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="220"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="190"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:lime"</span><span style="color: #0000ff;">/&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="210"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="45"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="170"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="15"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:yellow"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• CX属性定义的椭圆中心的x坐标

• CY属性定义的椭圆中心的y坐标

• RX属性定义的水平半径

• RY属性定义的垂直半径

线 <line>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">line </span><span style="color: #ff0000;">x1</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y1</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> x2</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> y2</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="stroke:rgb(255,0,0);stroke-width:2"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• x1 属性在 x 轴定义线条的开始

• y1 属性在 y 轴定义线条的开始

• x2 属性在 x 轴定义线条的结束

• y2 属性在 y 轴定义线条的结束

多边形 <polygon>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">polygon </span><span style="color: #ff0000;">points</span><span style="color: #0000ff;">="200,10 250,190 160,210"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="fill:lime;stroke:purple;stroke-width:1"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• points 属性定义多边形每个角的 x 和 y 坐标

折线 <polyline>（用于创建任何只有直线的形状）

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">polyline </span><span style="color: #ff0000;">points</span><span style="color: #0000ff;">="20,20 40,25 60,40 80,120 120,140 200,180"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="fill:none;stroke:black;stroke-width:3"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

路径 <path>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">path </span><span style="color: #ff0000;">d</span><span style="color: #0000ff;">="M150 0 L75 200 L225 200 Z"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

 

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

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

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

文本 <text>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">text </span><span style="color: #ff0000;">x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="15"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span><span style="color: #ff0000;"> transform</span><span style="color: #0000ff;">="rotate(30 20,40)"</span><span style="color: #0000ff;">&gt;</span>I love SVG<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">text</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

SVG 滤镜

SVG可用的滤镜是：

• feBlend - 与图像相结合的滤镜
• feColorMatrix - 用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用于照明过滤
• fePointLight - 用于照明过滤
• feSpotLight - 用于照明过滤

除此之外，您可以在每个 SVG 元素上使用多个滤镜！

<defs> 和 <filter>

所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。

<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feGaussianBlur </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> stdDeviation</span><span style="color: #0000ff;">="15"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">filter</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• <filter>元素id属性定义一个滤镜的唯一名称

• <feGaussianBlur>元素定义模糊效果

• in="SourceGraphic"这个部分定义了由整个图像创建效果

• stdDeviation属性定义模糊量

• <rect>元素的滤镜属性用来把元素链接到"f1"滤镜

SVG <feOffset>

<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。

第一个例子偏移一个矩形（带<feOffset>），然后混合偏移图像顶部（含<feBlend>）：

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="200%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="200%"</span><span style="color: #0000ff;">&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feOffset </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> dx</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> dy</span><span style="color: #0000ff;">="20"</span> <span style="color: #0000ff;">/&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="normal"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">filter</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• <filter>元素id属性定义一个滤镜的唯一名称
• <rect>元素的滤镜属性用来把元素链接到"f1"滤镜

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="200%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="200%"</span><span style="color: #0000ff;">&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feOffset </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> dx</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> dy</span><span style="color: #0000ff;">="20"</span> <span style="color: #0000ff;">/&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feGaussianBlur </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="blurOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> stdDeviation</span><span style="color: #0000ff;">="10"</span> <span style="color: #0000ff;">/&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="blurOut"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="normal"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">filter</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• <feGaussianBlur>元素的stdDeviation属性定义了模糊量

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：

• Linear

• Radial

SVG 线性渐变 - <linearGradient>

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变

• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变

• 当x1和x2不同，且y1和y2不同时，可创建角形渐变

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">linearGradient </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="grad1"</span><span style="color: #ff0000;"> x1</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> y1</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> x2</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> y2</span><span style="color: #0000ff;">="0%"</span><span style="color: #0000ff;">&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,255,0);stop-opacity:1"</span> <span style="color: #0000ff;">/&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,0,0);stop-opacity:1"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">linearGradient</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="85"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="url(#grad1)"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• <linearGradient>标签的id属性可为渐变定义一个唯一的名称

• <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置

• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。

• 填充属性把 ellipse 元素链接到此渐变

SVG 放射性渐变 - <radialGradient>

<radialGradient>元素用于定义放射性渐变。

<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">radialGradient </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="grad1"</span><span style="color: #ff0000;"> cx</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> fx</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> fy</span><span style="color: #0000ff;">="50%"</span><span style="color: #0000ff;">&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,255,255);
      stop-opacity:0"</span> <span style="color: #0000ff;">/&gt;</span>
      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(0,0,255);stop-opacity:1"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">radialGradient</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="85"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="url(#grad1)"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>

• <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称

• CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆

• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束

• 填充属性把ellipse元素链接到此渐变

菜鸟教程的在线实例：http://www.runoob.com/svg/svg-examples.html