# SVG学习笔记

# 1.1 svg简介-使用方式

  • 浏览器直接打开
  • 在HTML中使用img标签引用
  • 直接在HTML中使用SVG标签
  • 作为CSS背景

# 1.2 基本图形和属性

  • 基本图形
    rect(矩形)、circle(圆形)、elipse(椭圆)、line(直线)、polyline(折线)、polygon(多边形)
  • 基本属性
    fill、stroke、stroke-width、transform

# 1.2.1 rect属性

x、y、width、height、rx、ry

# 1.2.2 circle属性

cx、cy、r

# 1.2.2 elipse属性

cx、cy、rx、ry

# 1.2.3 line属性

x1、x2、y1、y2

# 1.2.4 填充、描边和变换

fill、stroke、stroke-width、transform

# 1.3 基本操作API

  • 创建图形
    document.createElementNS(ns,tagName)
  • 添加图形 element.appendChild(childElement)
  • 设置/获取属性 element.setAttribute(name,value) element.getAttribute(name)

# 2.1 SVG的世界、视野、视窗的概念

  • width,height-控制视窗
  • svg代码-定义世界
  • viewBox，preserveAspectRatio-控制视野

# 2.2 SVG中的图形分组

  • 标签来创建分组
  • 属性继承
  • transform属性定义坐标变换
  • 可以嵌套使用

# 2.3 坐标系统概述

  • 笛卡尔直角坐标系
  • 原点
  • 互相垂直的两条数轴
  • 角度定义

# 2.4 四个坐标系

  • 用户坐标系
    • 世界的坐标系
  • 自身坐标系
    • 每个图形元素或分组独立与生俱来
  • 前驱坐标系
    • 父容器的坐标系
  • 参考坐标系
    • 使用其他坐标系来考究自身的情况时使用

# 2.5 坐标变换

# 2.5.1 坐标变换定义

  • svg中，[坐标变换]是对一个坐标系到另一个坐标系的变换的描述

# 3.1 认识RGB和HSL

# 3.2 渐变

  • 让图形更丰满
  • 线性渐变和径向渐变

# 3.2.1 线性渐变

  • 和
  • 定义方向
  • 关键点位置及颜色
  • gradientUnits

# 3.2.2 径向渐变

  • 和
  • 定义方向
  • 关键点位置及颜色gradientUnits
  • 焦点位置

# 3.3 笔刷

  • 绘制纹理
  • 标签
  • patternUnits和patternContentUnits

# 4.1 Path概述

  • 强大的绘图工具
  • 规范 https://www.w3.org/TR/SVG11/paths.html

# 4.1.1 Path概述-Path字符串

<path d="M0,0L10,20C30-10,40,20,100,100" strole="red">

# 4.1.2 Path概述-命令基本规律

  • 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
  • 最后的参数表示最终要到达的位置
  • 上一个命令结束的位置就是下一个命令开始的位置
  • 命令可以重复参数表示重复执行同一条命令

# 4.2 移动和直线命令

  • M(x,y)+ 移动画笔，后面如果有重复参数，会当做是L命令处理
  • L(x,y)+ 绘制直线到指定位置
  • H(x)+ 绘制水平线到指定的x位置
  • V(y)+ 绘制竖直线到指定的y位置
  • m、l、h、v使用相对位置绘制

# 问题

# svg作为background引入时如何修改颜色？

当使用data url引入时做为静态文件无法进行修改，除非把svg嵌入到URL中,并修改fill

.field__search::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#fff' /></svg>");
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 1;
}

或者另一个解决办法就是修改html结构，直接使用svg