SVG 实例

在线实例

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

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

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

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

SVG 教程

SVG 实例

在线实例

SVG 实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

实例

教程导航