SVG 基础教程

目录

  • 一、SVG 基础
  • 二、绘制图形
    • 2.1 绘制矩形
    • 2.2 绘制圆形
    • 2.3 绘制椭圆
    • 2.4 绘制多边形
    • 2.5 绘制直线
    • 2.6 绘制曲线
    • 2.7 绘制路径
    • 2.8 绘制文本
  • 三、SVG 中的滤镜
    • 3.1 SVG 滤镜类型
    • 3.2 SVG 实现马赛克效果
  • 四、SVG 实现动画
  • 五、SVG 中的渐变
    • 5.1 线性渐变
    • 5.2 径向渐变

最近笔者在抓取数据的时候,遇到了 SVG 反爬,故找了一份 SVG 学习笔记,本文用于记录 SVG 学习过程中的知识点。

一、SVG 基础

SVG 指可伸缩矢量图形,是定义用于网络的基于矢量的图形,并且 SVG 图像不会因为放大或改变尺寸而有所失真。与其他图形相比,SVG 图像有这诸多优势,下面将具体介绍。

为什么使用 SVG?(其实我还想别使用呢,阻碍我抓取数据 哈哈)。SVG 是一种和图像分辨率无关的矢量图形格式,SVG 能得到广大编程者的青睐。自然是有着 过人之处,其主要优点如下:

  1. 高质量。由于 SVG 图像不依赖于分辨率的,所以当放大或改变图像尺寸时,图像的清晰度不会被破坏。
  2. 交互性和动态性。与其他图像格式相比,动态性和交互性是 SVG 较典型的一个特性。SVG 是基于 XML 的,它提供强大的交互性,程序员可以在 SVG 中嵌入动画元素,或通过脚本定义来达到高亮、声效、动画等特效。
  3. 颜色控

你可能感兴趣的:(Python3入门与进阶,svg,html5,css3)