SVG 参考手册
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的魔法吧!