SVG学习要点

最新推荐文章于 2024-10-06 12:32:09 发布

秀能

最新推荐文章于 2024-10-06 12:32:09 发布

阅读量1.7k

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/xiunen_z/article/details/20141471

版权

这篇博客深入探讨SVG，包括SVG的基本图形绘制、曲线命令、填充规则、元素介绍、渐变效果以及滤镜应用。重点介绍了贝塞尔曲线、椭圆弧参数、颜色填充、滤镜属性和各种滤镜元素的使用，如feBlend、feColorMatrix、feComposite等，还提供了代码示例和Demo演示。

摘要由CSDN通过智能技术生成

SVG简介

SVG 有一些预定义的形状元素，可被开发者使用和操作：

画布<svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
组<g>,<defs>
图片<image>
描述<title>, <desc>
文本<text>

SVG绘制基本图形

<svg width="100%" height="180px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <!--画四边形-->
    <rect x="10" y="10" width="80" height="40" rx="20" ry="10" stroke="red" fill="#EEE" stroke-width="3"></rect>
    <!-- x 为四边形左上角距容器元素左端的距离，y为四边形左上角距容器元素上端的距离 ，width为四边形的宽度，height为四边形的高度,rx为x轴上圆角半径，ry为y轴上圆角半径, stroke为边界的颜色，fill为填充颜色，stroke-width为边界的宽度,opacity为整个四边形的透明度，fill-opacity为填充颜色的透明度，stroke-opacity为边界的透明度，width,height,stroke,fill,stroke-opacity,fill-opacity,stroke-width等可以放到style中-->
    <!--画圆-->
    <circle cx="260" cy="60" r="50"></circle>
    <!-- cx为圆心距容器元素左端的距离， cy为圆心距容器元素上端的距离，r为半径 -->
    <!--画椭圆-->
    <ellipse cx="460" cy="60" rx="80" ry="50"></ellipse>
    <!--cx为椭圆中心点的x坐标，cy为y坐标，rx是水平轴半径，ry是垂直轴半径-->
    <!--画直线-->
    <line x1="560" y1="20" x2="650" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"></line>
    <!--x1,y1为起点坐标， x2，y2为终点坐标-->
    <!--画折线-->
    <polyline stroke="#000" fill="#FFF" stroke-width="1" points="660,20 680,90 720,60"></polyline>
    <!-- points是指这线上的转折点 -->
    <!--画多边形-->
    <polygon stroke="#000" fill="#FFF" stroke-width="1" points="760,20 780,90 820,60"></polygon>
    <!--画曲线-->
    <path d="M853 34C853 94 900 94 900 30" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--d为曲线绘制命令，详见后面-->
    <!--画水平线-->
    <path d="M910,50H960" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画竖线 -->
    <path d="M980,10V90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画直线 -->
    <path d="M1010,10L1050,90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--画平滑曲线，三次贝塞尔曲线情况1-->
    <path d="M1060,50S1080,90 1100,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的S(x1,y1)是(1060,50)-->
    <!--画平滑曲线，三次贝塞尔曲线情况2-->
    <path d="M1060,50S1080,90 1100,50S1120,90 1140,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个S(x1,y1)是(1080,90)关于(1140,50)的对称点-->
    <!--二次贝塞尔曲线-->
    <path d="M1120,50Q1140,90 1160,50" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!---平滑二次贝赛尔曲线情况1-->
    <path d="M1180,50Q1200,90 1220,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1200,90)关于(1220,50)的对称点-->
    <!---平滑二次贝赛尔曲线情况2-->
    <path d="M1180,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1180,50)-->
</svg>

path命令参考http://www.w3.org/TR/SVG/paths.html

曲线绘制命令

M = moveto 画笔移动到M(x0,y0)
L = lineto 画直线到L(x,y)
H = horizontal lineto 水平线 H(x)
V = vertical lineto 竖线 V(y)
C = curveto 曲线 C(x1,y1,x2,y2,x,y)
S = smooth curveto 平滑曲线S(x2,y2,x,y)，如果上一个命令是C或者S，那么(x1,y1)是上个命令的(x2,y2)关于S的起始点（x`,y`）的对称点，否则就是(x`,y`)。T和这个相同
Q = quadratic Belzier curve 二次贝赛尔曲线(x1,y1,x,y)
T = smooth quadratic Belzier curveto 平滑二次贝赛尔曲线
A = elliptical Arc 椭圆弧 A(rx,ry x-axis-rotation large-arc-flag sweep-flag x,y) rx,ry为椭圆弧对应椭圆的x轴半径和y轴半径，x-axis-rotation为椭圆旋转的角度，large-arc-flag是否是大弧标志未，0表示取小弧，1表示取大弧，sweep-flag表示所取的椭圆，0表示取下面部分，1表示取上面部分，详见附图
Z = closepath 闭合路径，没有参数，时Z前的坐标和起始点左边连成直线，使曲线闭合
*注：对应命令字母大写是绝对路径，小写是相对路径

贝塞尔曲线原理图

贝塞尔曲线参考维基百科http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

画椭圆弧的参数large-arc-flag和sweep-flag取值对应的椭圆弧

SVG填充颜色和绘制边界

填充颜色

(color属性为#ccc,下同)fill="none"fill="currentColor"fill="blue"fill-rule有两个值
nonzero:需要填充颜色的点A向任意方向发射线S，S与图形中的线会有若干个交点，如果该射线和图形中的线的交点B处的方向是顺时针，结果值r加1（r初始值为0），否则减1。最后结果值r如果不等于0&#x