SVG在前端中的常见应用

• 前端

SVG在前端中的常见应用

  • 一、svg标签
    • 1. svg
    • 2. 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属性：
    • id
    • x1：线性渐变开始位置x坐标
    • y1：线性渐变开始位置y坐标
    • x2：线性渐变结束位置x坐标
    • y2：线性渐变结束位置y坐标
  • 线性渐变可以由多个颜色组成，每个颜色用一个 指定。
  • stop 属性：
    • offset：开始和结束位置，值为百分比
    • stop-color：颜色。

    
        
            
            
        
    

    
    SVG

在这里插入图片描述

2. 径向渐变

  • 径向渐变通过 实现。
  • 属性：
    • id
    • cx, 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-1
    • stroke-opacity：笔画不透明度。
    • opacity：整个矩形的不透明度。

在这里插入图片描述

  • （接上）属性：
    • rx：圆角x轴方向上的半径长度。
    • ry：圆角y轴方向上的半径长度。

在这里插入图片描述

3. 绘制圆形

  • 使用标签
  • 属性：
    • cx：圆心x轴坐标，默认0
    • cy：圆心y轴坐标，默认0
    • r：圆半径。
    • 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

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/2136479624.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐