在线实例

下面的例子是把SVG代码直接嵌入到HTML代码中。

谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。

注意:下面的例子将不会在Opera运行,即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。


SVG 实例

SVG基本形状

一个圆

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

矩形

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

不透明矩形

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个矩形不透明2

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个带圆角矩形

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个椭圆

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

累叠而上的三个椭圆

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

两个椭圆

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一条线

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三角形

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四边形

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个星星

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

另一个星星

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

折线

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

另一个折线

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

路径

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二次贝塞尔曲线

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

编写文字

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

旋转文本

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

路径上文字

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

几行文字

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

文本链接

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3cschool.cc/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

定义一条线,文本或轮廓颜色(stoke)

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

定义一条线宽度,文本或轮廓(stroke-width)

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

stroke-linecap属性定义不同类型的开放路径的终结:

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

定义虚线(stroke-dasharray)

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

SVG滤镜

feGaussianBlur - 模糊效果

实例

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

feOffset - 偏移一个矩形,然后混合偏移图像顶部

实例

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="filter" x="0" y="0">
      <feGaussianBlur stdDeviation="5" />
      <feOffset dx="5" dy="5" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="grey" filter="url(#filter)" />
  <rect width="90" height="90" fill="yellow" stroke="black" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

feOffset - 模糊偏移图像

实例

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

feOffset - 使阴影变黑色

实例

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

feOffset - 为阴影涂上一层颜色

实例

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个feBlend滤镜

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs> 
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0"> 
      <stop offset="0" style="stop-color:#000000" /> 
      <stop offset=".33" style="stop-color:#ffffff" />       
      <stop offset=".67" style="stop-color:#ffff00" /> 
      <stop offset="1" style="stop-color:#808080" /> 
    </linearGradient> 
    <filter id="normal"> 
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic" /> 
    </filter> 
    <filter id="multiply"> 
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic" /> 
    </filter> 
    <filter id="screen"> 
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" /> 
    </filter> 
    <filter id="darken"> 
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic" /> 
    </filter> 
    <filter id="lighten"> 
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic" /> 
    </filter> 
  </defs> 
  <g style="enable-background:new"> 
    <rect x="40" y="20" width="300" height="450" style="fill:url(#MyGradient)" /> 
    <g style="font-size:75;fill:#888888;fill-opacity:.6"> 
      <text x="50" y="90" filter="url(#normal)">Normal</text> 
      <text x="50" y="180" filter="url(#multiply)">Multiply</text> 
      <text x="50" y="270" filter="url(#screen)">Screen</text> 
      <text x="50" y="360" filter="url(#darken)">Darken</text> 
      <text x="50" y="450" filter="url(#lighten)">Lighten</text> 
    </g> 
  </g>
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个feColorMatrix滤镜

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs> 
    <linearGradient id="MyGrad" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="500" y2="0"> 
      <stop offset="0" style="stop-color:#ff00ff" /> 
      <stop offset=".33" style="stop-color:#88ff88" /> 
      <stop offset=".67" style="stop-color:#2020ff" /> 
      <stop offset="1" style="stop-color:#d00000" /> 
    </linearGradient> 
    <filter id="Matrix"> 
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" /> 
    </filter> 
    <filter id="Saturate"> 
      <feColorMatrix type="saturate" values="0.4" /> 
    </filter> 
    <filter id="HueRotate"> 
      <feColorMatrix type="hueRotate" values="90" /> 
    </filter> 
    <filter id="Luminance"> 
      <feColorMatrix type="luminanceToAlpha" result="a" /> 
      <feComposite in="SourceGraphic" in2="a" operator="in" /> 
    </filter> 
  </defs> 
  <g style="font-size:50;fill:url(#MyGrad)">
    <text x="50" y="60">Unfiltered</text> 
    <text x="50" y="120" filter="url(#Matrix)">Matrix</text> 
    <text x="50" y="180" filter="url(#Saturate)">Saturate</text> 
    <text x="50" y="240" filter="url(#HueRotate)">HueRotate</text> 
    <text x="50" y="300" filter="url(#Luminance)">Luminance</text> 
  </g> 
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一个feComponentTransfer滤镜

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="MyGrad" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity">
      <feComponentTransfer>
        <feFuncR type="identity" />
	    <feFuncG type="identity" />
        <feFuncB type="identity" />
	    <feFuncA type="identity" />
      </feComponentTransfer>
    </filter>
    <filter id="Table">
	  <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1" />
	    <feFuncG type="table" tableValues="1 1 0 0" />
        <feFuncB type="table" tableValues="0 1 1 0" />
      </feComponentTransfer>
    </filter>
    <filter id="Linear">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25" />
	    <feFuncG type="linear" slope=".5" intercept="0" />
        <feFuncB type="linear" slope=".5" intercept=".5" />
      </feComponentTransfer>
    </filter>
    <filter id="Gamma">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0" />
	    <feFuncG type="gamma" amplitude="2" exponent="3" offset="0" />
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0" />
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-size="50" font-weight="bold" fill="url(#MyGrad)">
    <text x="50" y="60" filter="url(#Identity)">Identity</text>
    <text x="50" y="120" filter="url(#Table)">TableLookup</text>
    <text x="50" y="180" filter="url(#Linear)">LinearFunc</text>
    <text x="50" y="240" filter="url(#Gamma)">GammaFunc</text>
  </g>
</svg>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="test" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
      <feOffset result="Off1" dx="15" dy="20" />
      <feFlood style="flood-color:#ff0000;flood-opacity:0.8" />
      <feComposite in2="Off1" operator="in" result="C1" />
      <feOffset in="SourceGraphic" result="Off2" dx="30" dy="40" />
      <feFlood style="flood-color:#ff0000;flood-opacity:0.4" />
      <feComposite in2="O