SVG参考手册

SVG是可缩放矢量图形的缩写，是XML格式的，被用于网站和应用程序中静态和动态的图片呈现。

使用SVG

在网页上使用SVG

在HTML文件中嵌入SVG代码:

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="blue" />
</svg>

使用CSS来编辑SVG样式:

svg rect {
  fill: red;
}

使用JavaScript操纵SVG

使用JavaScript来操纵SVG元素。

let rect = document.querySelector("rect");
rect.setAttribute("fill", "green");

SVG形状元素

矩形(<rect>)

<rect x="10" y="10" width="20" height="20" fill="red" />

圆(<circle>)

<circle cx="50" cy="50" r="30" fill="blue" />

椭圆(<ellipse>)

<ellipse cx="50" cy="50" rx="20" ry="30" fill="green" />

直线(<line>)

<line x1="10" y1="10" x2="40" y2="40" stroke="black" />

折线(<polyline>)

<polyline points="10,10 20,20 30,10" stroke="black" fill="none" />

多边形(<polygon>)

<polygon points="10,10 20,20 30,10" fill="yellow" />

路径(<path>)

<path d="M10 10 H90 V90 H10 Z" stroke="black" fill="none" />

SVG属性

常用属性

• x: 元素的x坐标位置
• y: 元素的y坐标位置
• width: 元素的宽度
• height: 元素的高度
• fill: 元素的填充色
• stroke: 元素的描边色
• stroke-width: 元素的描边宽度
• opacity: 元素的透明度

变换属性

• transform: 定义SVG元素的变换，如平移、旋转或缩放
• rotate(angle): 以给定的角度旋转SVG元素
• scale(x-axis, y-axis): 按给定的比例缩放SVG元素
• translate(x-axis, y-axis): 按给定坐标移动SVG元素

路径属性

• d: 定义SVG路径的路径数据
• pathLength: 定义SVG路径的总长度

SVG滤镜

SVG滤镜可以对元素进行视觉效果的过滤处理，可以使用以下滤镜：

• <feGaussianBlur>:高斯模糊
• <feColorMatrix>: 颜色变换
• <feComponentTransfer>:色彩分离，色彩的映射
• <feBlend>:图层合成
• <feOffset>:阴影效果
• <feMorphology>:边缘检测
• <feDisplacementMap>:另一图像的灰度映射
• <feComposite>:叠加绘图

使用滤镜

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <rect x="20" y="20" width="200" height="100" fill="red" filter="url(#blur)" />
</svg>

这个例子展示如何使用高斯模糊滤镜，它可以让<rect>的边缘更加模糊。可以使用CSS来设置滤镜的效果。

总结

SVG是一个非常强大的图形格式，可以在网站和应用程序中使用。其形状元素非常适合创建静态图像，滤镜则可以使用它操纵图片并创建特殊视觉效果。最后，挑战自己去探究更多SVG的魔法吧！