svg学习

2024-10-01 10:59:18

一、什么是svg

SVG（Scalable Vector Graphics）是一种描述二维图形的语言。作为独立格式或与其他XML混合使用时，它使用XML语法，它和png、jpg等位图不同，它是一种矢量图，就算放大任意倍数，也不会出现失真的情况

二、使用方法

方式一：直接在页面中使用（不推荐，虽然能操作svg但是太占篇幅）

  <svg width="100" height="100" viewBox="0 0 50 50">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
   </svg>

方式二：使用img标签引入（不推荐，不能操作svg，纯展示推荐用这种方式）

<img src="./imgs/pao.svg" alt="" srcset="">

方式三：iframe标签引入

    <img src="./imgs/pao.svg" alt="" srcset="">

方式四：object标签引入

  <object data="./imgs/pao.svg" type="image/svg+xml"></object>

方式五：embed标签引入

<embed
    <embed src="./imgs/pao.svg" id="svgBox"></embed>

三、语法

svg就是一个普通的html标签,设置样式和正常的div、img是一样的

.myStyle {
      stroke: red;
      fill: blue;
      transform: rotateZ(90deg);
      transform-origin: center;
      stroke-width:2
    }

  <svg width="400" height="400">
      <circle cx="50" cy="50" r="50" class="myStyle"></circle>
    </svg>
  // 也可以这样写
  <svg width="400" height="400">
      <circle cx="50" cy="50" r="50" fill="blue" stroke="red"></circle>
    </svg>

width:定义svg的宽度
height:定义svg的高度
viewBox:svg的可视范围,只想展示svg某一部分的内容,参数分别为 x坐标 y坐标宽度高度
fill:svg填充颜色
stroke:描边颜色
stroke-width:描边宽度

3.1 circle标签 (圆)

 <svg width="100" height="100" viewBox="0 0 50 50">
    <circle cx="50" cy="50" r="50" stroke="red" fill="blue" stroke-width="2"></circle>
 </svg>

cx:圆心x轴坐标
cy:圆心y轴坐标
r:半径

3.2 line标签（线）

 <svg width="100" height="100">
   <line x1="0" y1="0" x2="50" y2="50" stroke="red"></line>
 </svg>

x1:第一个点的x坐标
y1:第一个点的y坐标
x2:第二个点的x坐标
y2:第二个点的y坐标

3.3 polyline(折线)

   <svg width="400" height="400">
      <polyline points="50,100 50,300 350,300 350,100" stroke="red" fill="none"></polyline>
    </svg>

points:每个点的坐标，空格隔开

3.4 rect(矩形)

<svg width="400" height="400">
   <rect x="10" y="10" width="200" height="100" fill="blue" stroke="red" ></rect>
</svg>

x:左上角x坐标
y:左上角y坐标
width:矩形的宽度
height:矩形的高度

3.5 ellipse(椭圆)

   <svg width="400" height="400">
      <ellipse cx="100" cy="100" rx="20" ry="100" ></ellipse>
    </svg>

cx:圆心的x坐标
cy:圆心的y坐标
rx:x轴方向上的长度
ry:y轴方向上的长度

3.6 polygon(多边形)

   <svg width="400" height="400">
      <polygon points="30,30 30,50 80,50 20,60 14,58" ></polygon>
    </svg>

points:每个点的坐标，空格隔开

3.7 path(路径)

  <svg width="400" height="400">
           <path d="M 20,2 L 20,5 L 15,5 15,10 L 100,20 M 10,20 L25,45 L 45,10 H 100 V 50 A 30 50 -45 0 1 215.1 109.9" fill="none" stroke="red"></path>
  </svg>

d:路径的点位集合
M:移动到(moveTo),将画笔抬起，移动到某个点
L:画直线到(lineTo),将画笔按下，移动到某个点，大写代表绝对位置,就是点的坐标,小写代表相对位置，相对于上一个点x轴移动，y轴移动
H:水平画一条直线,x轴的坐标，不区分大小写，大写代表绝对位置,就是点的坐标,小写代表相对位置，相对于上一个点x轴移动，y轴移动
V:垂直画一条直线,y轴的坐标，不区分大小写，大写代表绝对位置,就是点的坐标,小写代表相对位置，相对于上一个点x轴移动，y轴移动
A rx ry x-axis-rotation large-arc-flag sweep-flag x y:

rx:x轴方向的半径长度
ry:y轴方向的半径长度
x-axis-rotation:绕x轴旋转
large-arc-flag:0代表弧线小于180度，1代表弧线大于180度
sweep:0代表逆时针旋转，1代表顺时针旋转
x:点的x轴坐标
y:点的y轴坐标

Z:闭合，将最后一个点和第一个点连起来，不区分大小写

3.8 text(文字)

 <svg width="400" height="400">
      <text x="20" y="100" stroke="red" fill="none" style="font-size: 50px;">熊芮大美女</text>
 </svg>

字体颜色设置color没用,使用fill设置颜色

3.9 use

重复使用某个画好的东西

 <svg width="400" height="400">
      <circle id="c1" cx="100" cy="100" r="50" stroke="red" fill="blue" stroke-width="2"></circle>
      <use href="#c1" x="0" y="0"></use>
    </svg>

id:唯一标识
href:要使用某个唯一标识
x:相对移动x轴的距离(相对于circle中心点)
y:相对移动y轴的距离(相对于circle中心点)

3.10 g(组)

类似于组件，把一部分样式封装起来使用

 <svg width="400" height="400">
      <g id="c1">
        <text x="50" y="30" fill="red">熊芮大美女</text>
        <circle id="c1" cx="100" cy="100" r="50" stroke="red" fill="blue" stroke-width="2"></circle>
      </g>
      <use href="#c1" x="10" y="10"></use>
    </svg>

3.11 defs

用于自定义形状，它内部的代码不会显示，仅供引用

    <svg width="400" height="400">
      <defs>
        <g id="c1">
          <text x="50" y="30" fill="red">熊芮大美女</text>
          <circle id="c1" cx="100" cy="100" r="50" stroke="red" fill="blue" stroke-width="2"></circle>
        </g>
      </defs>
      <use href="#c1" x="10" y="10"></use>
    </svg>

3.12 pattern

用于自定义一个形状，该形状可以被引用来平铺一个区域

 <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
  
        <pattern id="Pattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
          <circle cx="50" cy="50" r="35" fill="skyblue"></circle>
        </pattern>
      </defs>
    
      <rect
        fill="url(#Pattern)"
        stroke="black"
        x="0"
        y="0"
        width="500"
        height="500" />
    </svg>

patternUnits:userSpaceOnUse表示pattern的宽度和长度是实际的像素值,指定这个模式去填充下面的矩形

码农公寓