SVG入门

image.png

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg">

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0),r 属性定义圆的半径。
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/></br>

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

• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• x 属性定义矩形的左侧距离浏览器窗口位置
• y 属性定义矩形的顶端距离浏览器窗口位置
• CSS 的 fill-opacity 属性定义填充颜色透明度
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度
  <rect width="300" height="100" y='100' x='100' rx='40' ry='40'
  style="fill:rgb(0,0,255);stroke-width:1;
  stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;"/></br>

椭圆
cx 圆点的 x 坐标
cy 圆点的 y 坐标
rx 水平半径
ry垂直半径
<ellipse cx="640" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="620" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="610" cy="45" rx="170" ry="15"
style="fill:yellow"/></br>

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

<polygon> 标签用来创建含有不少于三个边的图形。

<polygon points="420,300 500,410 370,450"
style="fill:#cccccc;
stroke:#000000;stroke-width:1" /></br>

<polyline> 标签用来创建仅包含直线的形状
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></br>

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/></br>

filter标签定义SVG滤镜。并且在defs标签内，id定义向图形应用哪个滤镜
url属性把元素链接到某个滤镜
滤镜简介：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/></br>

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中，有两种主要的渐变类型：
线性渐变：水平，垂直，角形
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<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="600" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/></br>

放射性渐变 cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="60%"
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="630" cy="500" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>