你还在用png导入吗？学学svg吧！

引入：在idea的中文网站上用到了许多svg图形，感兴趣的可以去看看。

【以下均为个人了解简化总结（了解这些，一般就足够了），如果想要更加深入了解可以查找ai或者寻找相关svg记录的文章，如果以下有地方写错了，感谢指正】

一、什么是svg：

如上所能见到的小图标都是使用了svg，它是一种矢量图形，可以实现无限缩放不失真。

二、如何获得svg：

1、自己手动编写svg源码（还需要自己先学svg语法）；

2、使用转换工具，将图片转换获取svg；

3、从现有网站中得到（浏览器打开网页->点击想要的svg元素->右键检查->鼠标右键->编辑为HTML元素）【这种更适合想要模仿网站的】

......

三、使用方式（一般会用到的,更多时候源码可以直接更改）：

1、fill（填充颜色）：

在源码内找到fill，基本格式：fill="red" / fill="none" ,在里面填写自己所需要的颜色；

示例：

xml 复制代码

<!-- 颜色名称 -->
<circle cx="50" cy="50" r="40" fill="red"/>

<!-- 十六进制 -->
<rect x="10" y="10" width="80" height="60" fill="#00ff00"/>

<!-- RGB/RGBA -->
<polygon points="50,5 90,90 10,90" fill="rgb(0,0,255)"/>
<ellipse cx="50" cy="50" rx="30" ry="20" fill="rgba(255,0,0,0.5)"/>

<!-- 无填充 -->
<path d="M10 10 L90 10 L50 90 Z" fill="none"/>

2、描边（即svg图形的边框）：

（1）stroke（描边颜色）：

基本格式： stroke="颜色"

示例：

xml 复制代码

<rect x="10" y="10" width="80" height="60" stroke="black"/>

<!-- 渐变描边 -->
<defs>
  <linearGradient id="strokeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#f00"/>
    <stop offset="100%" stop-color="#00f"/>
  </linearGradient>
</defs>
<circle cx="50" cy="50" r="40" stroke="url(#strokeGrad)"/>

（2）stroke-width（描边宽度）：

基本格式：

第一种形式：px（默认）或者其他css单位： stroke-width="2"

示例：

xml 复制代码

<!-- 单位可以是px(默认)或其他CSS单位 -->
<path d="M10 80 Q 100 10 190 80" stroke="black" stroke-width="2"/>

第二种形式：百分比（基于视口）： stroke-width="1%"

示例：

xml 复制代码

<!-- 百分比基于视口 -->
<rect x="10%" y="10%" width="80%" height="80%" stroke="blue" stroke-width="1%"/>

3、变换（transform）：

基本格式：

（1）平移（translate）：

transform="translate(x,y)"

【x为x轴方向的平移距离（必须），y为y轴方向的平移距离（可选，默认为0）】

示例：

xml 复制代码

<!-- 平移 -->
<rect x="10" y="10" width="50" height="50" transform="translate(30,20)"/>

（2）旋转（rotate）：

transform="rotate(x,y)"

【x,y为旋转中心点坐标（可选，默认为当前坐标系原点）】

示例：

xml 复制代码

<!-- 旋转 -->
<rect x="10" y="10" width="50" height="50" transform="rotate(45 35 35)"/>

（3）缩放（scale）：

transform="scale(x,y)"

【x为x轴方向的缩放因子（必须），y为y轴方向的缩放因子（可选，默认等于x）】

示例：

xml 复制代码

<!-- 缩放 -->
<circle cx="50" cy="50" r="20" transform="scale(1.5)"/>

【注意点：一般缩放都是用scale，直接改变svg的width，会影响到其他svg】

5、渐变：

想要svg有渐变元素

（1）线性渐变：使用标签：linearGradient

xml 复制代码

<!-- 线性渐变 -->
<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<rect fill="url(#grad1)" />

（2）径向渐变：使用标签：radialGradient

xml 复制代码

<!-- 径向渐变 -->
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
  <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>

【拓展：如果想要实现当鼠标移过去改变渐变色，可以先写两个渐变标签，给予不同的id名，在对应的css里面书写：

css 复制代码

svg:hover{
    fill: url(linearGradient标签的id名)
}

如此，便可改变渐变色】