python 开发语言 SVG在前端中的常见应用

SVG在前端中的常见应用

一、svg标签1. svg2. g

二、描边属性三、模糊和阴影效果1. 模糊2. 阴影效果

四、线性渐变和径向渐变1. 线性渐变2. 径向渐变

五、绘制1. 内置形状元素2. 绘制矩形3. 绘制圆形4. 绘制椭圆5. 绘制线条6. 绘制多边形7. 绘制多线条8. 绘制文本9. 绘制路径

只是一些常用的应用，但足以入门。

一、svg标签

1. svg

svg标签相当于画布。可以在标签中定义宽和高

2. g

g 标签可以对svg元素进行分组，分组后可以统一配置属性。

...

二、描边属性

stroke：笔画颜色属性，值为颜色值strike-width：笔画宽度属性，值为数值stroke-linecap：笔画笔帽属性

butt：默认值，没有线帽。round：圆形线帽。square：方形线帽。 stroke-dasharray：笔画虚线属性，值为数组序列，至少2个值。

所有的描边属性都可以应用于线条、文本、元素轮廓。下面会大量运用。

三、模糊和阴影效果

给 svg 添加特殊效果需要添加 实现，且在 （definitions）中定义。filter 里面包含一个或多个效果（过滤器）滤镜。filter 属性：

id：识别过滤器。x：滤镜起始点x坐标y：滤镜起始点y坐标width：滤镜宽height：滤镜高

1. 模糊

feGaussianBlue 定义高斯模糊。定义在 filter 里面。feGaussianBlue 属性：

stdDeviation ：定义模糊数量，值为数值，值越大越模糊。

2. 阴影效果

阴影效果通过 feOffset 和feBlend 实现。定义在 filter 里面。feOffset 定义偏移，属性：

dx：阴影在x轴上的偏移，值为数值。dy：阴影在y轴上的偏移，值为数值。in：表示阴影图像的来源。（SourceAlpha黑色阴影，SourceGraphic图像阴影） feBlend在偏移图像上混合原始图像，属性：

in：值为SourceGraphic。

四、线性渐变和径向渐变

1. 线性渐变

线性渐变通过 实现，且在 中定义。linearGradient属性：

idx1：线性渐变开始位置x坐标y1：线性渐变开始位置y坐标x2：线性渐变结束位置x坐标y2：线性渐变结束位置y坐标 线性渐变可以由多个颜色组成，每个颜色用一个 指定。stop 属性：

offset：开始和结束位置，值为百分比stop-color：颜色。

SVG

2. 径向渐变

径向渐变通过 实现。属性：

idcx, cy，r：定义最外面的圆（渐变结束圆圆心横坐标、纵坐标、半径）fx，fy：定义最里面的圆（渐变起始点横坐标、纵坐标）

五、绘制

1. 内置形状元素

元素：矩形 rect、圆形 circle、椭圆 ellipse、线条 line、多线条 polyline、多边形 ploygon、路径 path。坐标系

2. 绘制矩形

使用标签 rect。属性：

宽度 width高度 height填充色 fill笔画颜色 stroke笔画宽度 stroke-width。

（接上）属性：

x：左边位置y：顶部位置fill-opacity：填充不透明度，为0-1stroke-opacity：笔画不透明度。opacity：整个矩形的不透明度。

stroke="pink" fill-opacity="0.1" stroke-opacity="0.5"/>

（接上）属性：

rx：圆角x轴方向上的半径长度。ry：圆角y轴方向上的半径长度。

stroke="pink" fill-opacity="0.1" stroke-opacity="0.5" rx="20" ry="20"/>

3. 绘制圆形

使用标签 属性：

cx：圆心x轴坐标，默认0cy：圆心y轴坐标，默认0r：圆半径。stroke、stroke-width、fill。

4. 绘制椭圆

使用标签 属性：

cx、cy。rx：水平半径ry：垂直半径。

堆叠椭圆

空心椭圆

5. 绘制线条

使用标签 属性：

x1：起点x坐标y1：起点y坐标x2：终点x坐标y2：终点y坐标

6. 绘制多边形

使用 用于创建一个至少三个边的图形。属性：

points：定义每个角的（x, y）坐标，至少三队坐标。

绘制五角星

7. 绘制多线条

使用创建任何只由直线组成的形状属性：

points：同上

8. 绘制文本

使用 ...属性

x：文本x坐标y：文本y坐标font-size：文本大小text-anchor：对齐方式（start | middle | end）stroke、stroke-width、fill

家人们，谁懂啊

（接上）属性：

transform

rotate(旋转角度 旋转中心x, 旋转中心y)。默认（x, y）为（0, 0）。

家人们，谁懂啊

text 元素可以包裹多个 tspan，每个tspan可以包含不同的格式和位置。tspan属性：

x、y

Several lines

First Line

Second Line

text标签可以添加链接。使用a包裹起来。要添加文本需要给svg添加xmlns:link属性，属性值固定为w3的地址。a 属性：

xlink:href：链接地址target：跳转方式

百度

9. 绘制路径

使用 可以绘制任意形状的图形属性：

d：draw，定义绘制路径的命令。命令大写表示绝对定位，小写表示相对定位。

命令 M/m：moveto缩写，定义起点坐标（x, y）命令 L/l：lineto缩写，绘制一条线。命令 q：quadraticBezierCurve缩写，绘制二次贝塞尔曲线。定义控制点和终点坐标。 绘制二次贝塞尔。

A

B

C

好文链接