HTML5 -- SVG-CSDN博客

本文链接：https://blog.csdn.net/gxgalaxy/article/details/108176821

文章目录

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

1.优点

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准与 Flash 相比
SVG 文件是纯粹的 XML

2.SVG形状

位图：基于颜色的描述，一张图片中像素的颜色整体组合在一起

（1）矩形 rect

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <rect width = '300' height = '200' x = '30' y = '20'></rect>
    //rx ry表示圆角
    // <rect width = '300' height = '200' x = '30' y = '20' rx = '10' ry = '10'></rect>
  </svg>
</body>

在这里插入图片描述

（2）圆形 circle

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <circle cx='200' cy='200' r='100' stroke='black'></circle>
  </svg>
</body>

在这里插入图片描述

（3）椭圆 ellipse

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <ellipse cx='200' cy='200' rx='150' ry='100' stroke='black' fill='transparent'></ellipse>
  </svg>
</body>

在这里插入图片描述

（4）线条 line

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <line x1='100' y1='100' x2='300' y2='300' stroke='black'></line>
  </svg>
</body>

在这里插入图片描述

（5）多边形 polygon

标签用来创建含有不少于三个边的图形。points 属性定义多边形每个角的 x 和 y 坐标

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <polygon points='100,100,100,200,250,300,300,210' stroke='black'></polygon>
  </svg>
</body>

在这里插入图片描述

（6）折线 polyline

标签用来创建仅包含直线的形状。

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <polyline points='100,100,100,200,250,300,300,210' stroke='red' fill='transparent'></polyline>
  </svg>
</body>

在这里插入图片描述

（7）路径 path

M = moveto
L = lineto
H = 水平位置
V = 垂直位置
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = 闭合
大写字母表示绝对定位，小写字母表示相对定位

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <path d="M250 150 L150 350 L350 350 Z" stroke='red' fill='transparent' />
  </svg>
</body>

在这里插入图片描述

3.高斯模糊

注意点：
标签用来定义 SVG 滤镜。
标签使用必需的 id 属性来定义向图形应用哪个滤镜。
标签必须嵌套在标签内。
stdDeviation 属性可定义模糊的程度

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
    <defs>
      <filter id="Gaussian_Blur">
      	<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
      </defs>
      <ellipse cx='200' cy='200' rx='150' ry='100' style="stroke:blue;fill:yellow; filter:url(#Gaussian_Blur)"></ellipse>
  </svg>
</body>

在这里插入图片描述

4.渐变

（1）线性渐变

linearGradient 可用来定义 SVG 的线性渐变。
linearGradient 标签必须嵌套在 defs 的内部
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
      <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='200' rx='150' ry='100' style="fill:url(#orange_red)"></ellipse> -->
  </svg>
</body>

在这里插入图片描述

（2）放射性渐变

<body>
  <svg width = '400' height = '400' style="border:1px solid black">
      <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='200' cy='200' rx='150' ry='100' style="fill:url(#grey_blue)"></ellipse> -->
  </svg>
</body>

在这里插入图片描述