关于svg

news2025/2/26 22:07:17

1.svg是一种基于XML语法的图像格式，是一种图像格式，是一种对图像的描述，不是基于像素处理的，因此他的本质是文件，而且体积小不易失真。

2.svg文件可以直接插入网页，也就是html文件中，成为dom的一部风，还可以通过js和css对其进行操作。也可以写在独立的文件中，然后通过标签插入网页。

直接插入网页

间接插入网页

<!DOCTYPE html>

<html>

<body>

<svg

id="mysvg"

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 800 600"

preserveAspectRatio="xMidYMid meet"

<svg>

</body>

</html>

//circle.svg的文件内容

</svg>

//html文件内容

<!DOCTYPE html>

<html>

<body>

</body>

</html>

3.关于svg语法

1.svg代码不管在哪都需要svg标签包裹，写在svg标签中

2. width,height属性代表了svg图片在html中显示的大小，默认单位是像素

3.viewBox属性可以设定svg图片展示某一部分，他的值有四个，分别是左上角的横纵坐标，和将要展示的宽度高度

 <svg width="100" height="100" viewBox="50 50 50 50">
       
 <circle id="mycircle" cx="50" cy="50" r="50" />
 
</svg>

虽然展示的是50*50，但是图片大小是100*100，这个不变，所以这四分之一相当于是被放大了

注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

4.关于圆的绘制，cx横坐标，cy纵坐标，r半径，坐标点都是相对于左上角来说的

 <svg width="300" height="180">
        <circle cx="30"  cy="50" r="25" />
        <circle cx="90"  cy="50" r="25" class="red" />
        <circle cx="150" cy="50" r="25" class="fancy" />
      </svg>

class类名也可以对svg图片进行样式设置，但是和div的样式有点不同，它有下面的样式

fill：填充色
stroke：描边色
stroke-width：边框宽度

5.关于path,<path>标签用于制路径。

<svg width="300" height="180">
<path d="
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"></path>
</svg>
//M：移动到（moveto）
//L：画直线到（lineto）
//Z：闭合路径