数据可视化 SVG （一）

编程语言 2023-04-09 22:12:46 阅读次数: 0

目录：

1 邂逅SVG和初体验

2 网格和坐标系

3 视口和视图框

4 绘制形状和路径

5 绘制文字和图片

6 SVG分组和复用

7 填充和边

前面使用canvas会遇到的性能优化的问题就是，每秒需要60帧的动画，60次重绘图形会影响性能，所以，需要动的图形需要和不会动的图形分开绘图，只有动的图形使用requsetAnimationFrame（），不会动的图形不用requsetAnimationFrame（）。或者不会动的图形直接用div绘制。

使用canvas绘制的时候尽可能少的使用高斯模糊，渐变，模糊，透明度变化

如果standalone选择的yes就是使用内部DTD声明，内部DTD声明写法如下：

 如果standalone选择的no就是使用外部DTD声明，外部DTD声明写法如下：

创建svg的方法：

一、直接创建文本文件，后缀改为svg的创建svg文件的方法，使用1.0版本的写法：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!-- 下面这个文档头是由上面xml设置的standalone='no'才写的，它主要是用来规范下面
svg标签内容是否符合规范语法的。这个文档头是固定写法的。-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- 
 version="1.0"
 baseProfile="full" 正确渲染svg内容时所需要最小SVG语言概述(版本); full:正常的svg语言概述  basic:基本SVG语言概述  tiny: 轻量级SVG语言概述

 xmlns: 指定svg元素  和 svg内的子元素都是属于 http://www.w3.org/2000/svg 这个命名空间下
 
 -->
<svg
 version="1.0"
 baseProfile="full"
 width="100"
 height="100"
 xmlns="http://www.w3.org/2000/svg"
>
  <rect x="0" y="0" width="100" height="100"></rect>
  <title>我是svg title</title>
</svg>

二、直接创建文本文件，后缀改为svg的创建svg文件的方法，使用2.0版本的写法：

<?xml version="1.0" standalone="no" ?>
<svg
 width="100"
 height="100"
 xmlns="http://www.w3.org/2000/svg"
>
  <rect x="0" y="0" width="100" height="100"></rect>
</svg>

三、在html文件的body中创建svg的写法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <!-- 1.创建svg 1.0 -->
  <svg
    version="1.0"
    baseProfile="full"
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  > 
   <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

  <!-- 2.创建svg 2.0 -->
  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  > 
   <rect x="0" y="0" width="100" height="100"></rect>
  </svg>



    <!-- 3.创建svg 2.0 简写 
      xmlns="http://www.w3.org/2000/svg" 这个命名空间浏览器的解析器会自动添加

      默认w 300px  h: 150px
    -->
  <svg> 
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

  
</body>
</html>

四、在html的js中创建svg的写法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1.创建svg 2.0 -->
  <!-- 
    
    
  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  > 
   <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

-->


  <script>

    /**
     * 
     * jQuery -> Snap.svg
    */
    window.onload = function() {
      // 1.创建svg 和 rect 元素
      let xmlns = 'http://www.w3.org/2000/svg'
      let svgEl = document.createElementNS(xmlns, 'svg') 
      let rectEl = document.createElementNS(xmlns, 'rect') 

      // 2.给svg 和 rect 元素对象添加属性
      svgEl.setAttributeNS(null, 'version', '1.0')
      svgEl.setAttributeNS(null, 'width', 100)
      svgEl.setAttributeNS(null, 'height', 100)

      rectEl.setAttributeNS(null, 'width', 50)
      rectEl.setAttributeNS(null, 'height', 50)
      
      // 3.将svg添加到 body上
      svgEl.appendChild(rectEl)
      document.body.appendChild(svgEl)
    }

  </script>

</body>
</html>

svg 的使用方式：总共6种

一、在img标签中使用svg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>  

  <!-- 在img中直接使用svg -->
  <img src="./rect.svg" alt="">
</body>
</html>

二、在background-image中使用 就是css里使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-image: url(./rect.svg);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>  

  <div class="box"></div>
</body>
</html>

三、直接在html文件中嵌入svg代码，直接把svg内容写到html的body里面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

</body>
</html>

svg坐标系：

一、坐标系统

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<!-- 正方形的xy轴坐标分别为10像素 -->
    <rect x="10" y="10" width="100" height="100"></rect>
  </svg>

</body>
</html>

svg为什么有两个坐标系，因为视口坐标系和用户坐标系分开有利于用户的缩放图形到视口里面；canvas只有一个坐标系，这个坐标系放大了，图形是不会变大的。

viewport和viewBox:

一、指定视口的大小(画布的大小)viewport

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <!-- 
    通过给svg设置 width 和 height 来指定视口的大小(画布的大小)
    下面指定视口的大小为: 300 * 300
   -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect x="10" y="10" width="100" height="100"></rect>
  </svg>

</body>
</html>

二、viewport和viewBox有相同的宽高比

 viewport：viewbox比例是

400:400  1:1

100:100  1:1

1px --》4px   在viewbox的图形是这样子的，但是放到viewport里面会等比例缩放。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

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

</body>
</html>

三、viewport和viewBox有相同的宽高比-指定viewBox最小的x和y。指的是<svg width="400" height="400" viewBox="50 50 100 100" >，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

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

</body>
</html>

四、viewport和viewBox不同的宽高比

这里比例不同时会把图形缩放还会居中显示。

 可以通过来设置preserveAspectRatio='none'强制比例缩放：

 可以通过来设置preserveAspectRatio='xMinyMin'把图形放到viewport的坐标原点上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

 
  <svg width="400" height="400" 
    viewBox="0 0 200 100" 
    preserveAspectRatio="xMinYMin"
  >
    <circle cx="50" cy="50" r="50"></circle>
  </svg>

</body>
</html>

五、svg基本图形：

1、矩形，圆形、椭圆

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >

    <rect x="0" y="0" width="100" height="50"></rect>
    //4个角弧度
    <rect x="100" y="100" width="100" height="50" rx="20" ry="20"></rect>

    //从150 200为圆心画圆
    <circle cx="150" cy="200" r="50" fill="red"></circle>
    
    //椭圆圆心为xy轴坐标
    <ellipse cx="250" cy="200" rx="25" ry="50" fill="red"></ellipse>

  </svg>

</body>
</html>

2、直线<line></line>，折现<polyline></polyline>，多边形，路径<path></path>，路径-命令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>
    <!-- 直线 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      线、边框是用stroke , 而不是 fill
     -->
    <line x1="100" y1="100"  x2="200" y2="100" stroke="red" stroke-width="5"></line>

  </svg>


   <!-- 折现 -->
   <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 第1种写法 -->
    <!-- <polyline points="20 0, 80 50, 20, 100"></polyline> -->
    <polyline points="20 0, 80 50, 20, 100" fill="transparent" stroke="red"></polyline>

    <!-- 第2种写法 -->
    <!-- <polyline points="20 0 80 50 20 100"></polyline> -->

    <!-- 第3种写法 -->
    <!-- <polyline points="20 ,0 ,80 ,50 ,20, 100"></polyline> -->

  </svg>

   <!-- 多边形 -->
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- fill="transparent"是透明色 -->
    <polygon points="20 0, 80 50, 20 100" fill="transparent" stroke="red"></polygon>

  </svg>

    <!-- 路径 -->
   <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
  
    <!-- 1.使用path 绘制一个三角形 -->
    <!-- <path d="M 20 0, 80 50, 20 100" fill="transparent" stroke="red"></path> -->


    <!-- 1.使用path 绘制一个闭合的三角形 -->
    <!-- <path d="M 20 0, 80 50, 20 100 Z" fill="transparent" stroke="red"></path> -->


    
    <!-- 1.使用 path 绘图的命令:
      M  moveTo
      Z  close path
      L  lineTo  
    -->
    <path d="M 20 0,L 80 50,L 20 100 Z" fill="transparent" stroke="red"></path>

  </svg>

  <!-- 路径-命令 -->
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
  
   
    <path d="M 20 0,L 80 50,l 20 50 Z" fill="transparent" stroke="red"></path>
    
  </svg>
  

</body>
</html>

六、svg绘制图片和文字：

1、绘制图片,文字<image></image><text></text>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>
   

    <!-- 绘制图片 -->
  <!-- svg 2.0版本的语法 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <image 
     x="0"
     y="0"
     href="../images/googlelogo_color_92x30dp.png"
     width="100"
     height="100"
    >
    </image>
  </svg>


    <!-- svg 1.0版本的语法 -->
    <svg 
      version="1.0"
      baseProfile="full"
      width="300" height="300" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <image 
       x="0"
       y="0"
       xlink:href="../images/googlelogo_color_92x30dp.png"
       width="100"
       height="100"
      >
      </image>
    </svg>


     <!-- svg 2.0 + 1.0 版本的语法( 为了兼容以前的浏览器的写法 ) -->
      <svg 
        version="1.0"
        baseProfile="full"
        width="300" height="300" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <image 
         x="0"
         y="0"
         xlink:href="../images/googlelogo_color_92x30dp.png"
         href="../images/googlelogo_color_92x30dp.png"
         width="100"
         height="100"
        >
        </image>
      </svg>

  <!-- 绘制文字 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
   
        <!-- 1.在svg中绘制一个文字 -->
        <!-- <text x="100" y="100" font-size="50" fill="red">Ay</text> -->

        <!-- 2.文本的对齐方式 -->
        <!-- <text x="100" y="100" text-anchor="middle"  font-size="50"             
         fill="red">Ay</text> -->

        <!-- 3.基线对齐方式 :
        有 auto 、middle 或 hanging 值, 默认值：auto
         -->
       <text x="100" y="100" dominant-baseline="middle" font-size="50" 
       fill="red">Ay</text>


  </svg>
      

  <!-- 绘制文字-tspan    文字可以嵌套，使用tspan标签做到嵌套文字 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
   
    <!-- 1.在svg中绘制一个文字 -->
    <text x="40" y="100" font-size="20">
      iPhone14 
      <tspan fill="red">¥100</tspan>
    </text>

  </svg>


   
    
</body>
</html>

七、svg的组合和复用：

1、图形的组合 <g></g>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >

    <!-- <circle cx="50" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="80" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="110" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="140" cy="50" r="25" fill="transparent" stroke="red"></circle> -->

    <!-- 
      g 元素没有专有的属性,只有全局的属性
      全局属性:id  class  style fill stroke onclick
     -->
    <g fill="transparent" stroke="red">
      <circle cx="50" cy="50" r="25"></circle>
      <circle cx="80" cy="50" r="25"></circle>
      <circle cx="110" cy="50" r="25"></circle>
      <circle cx="140" cy="50" r="25"></circle>  
    </g>

  </svg>

</body>
</html>

2、图形的复用和定义可复用图形defs（使用defs定义的复用图形use里面不可以使用width，height改变图形大小）定义复用的图形不会直接显示，只有复用的时候会显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 0.样式 -->
      <style>
        rect{
          fill: green;
        }
      </style>
      <!-- 1.定义了一个矩形 -->
      <rect id="rectangle"  x="0" y="0" width="100" height="50"></rect>

      <!-- 2.定义了一个组合图形 -->
      <g fill="transparent" stroke="red">
        <circle cx="50" cy="50" r="25"></circle>
        <circle cx="80" cy="50" r="25"></circle>
        <circle cx="110" cy="50" r="25"></circle>
        <circle cx="140" cy="50" r="25"></circle>  
      </g>
      <!-- 定义渐变 -->
      <!-- 滤镜 -->

    </defs>


    <!-- 在这里进行图形的复用 -->
  </svg>

</body>
</html>

3、复用图形，上面定义的复用图形，现在使用它们 use

<use href='定义图形的id'></use>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 0.样式 -->
      <style>
        rect{
          fill: green;
        }
      </style>
      <!-- 1.定义了一个矩形 -->
      <rect id="rectangle"  x="0" y="0" width="100" height="50"></rect>

      <!-- 2.定义了一个组合图形 -->
      <g id="logo" fill="transparent" stroke="red">
        <circle cx="50" cy="50" r="25"></circle>
        <circle cx="80" cy="50" r="25"></circle>
        <circle cx="110" cy="50" r="25"></circle>
        <circle cx="140" cy="50" r="25"></circle>  
      </g>
      <!-- 定义渐变 -->
      <!-- 滤镜 -->
    </defs>

    <!-- 在这里进行图形的复用 -->
    <!-- <use href="#rectangle"></use> -->
    <!-- <use x="100" y="100"  href="#rectangle"></use> -->

    <!-- <use href="#logo"></use> -->
    <!-- <use x="100" y="100" href="#logo"></use> -->
    
  </svg>



  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 
      他的宽和高是没有生效的 ????  只用use引用的图形是 svg 或 symbol 才会起作用
     -->
    <use href="#rectangle" width="200" height="100" ></use>
  </svg>
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <use href="#logo"></use>
  </svg>
</body>
</html>

4、制作icon图标-没有使用symbol

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" >
    <path d="M 80 0,L 20 50, L 80 100 Z"></path>
  </svg>

  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" >
    <polygon points="20 0, 80 50, 20 100"></polygon>
  </svg>

</body>
</html>

5、制作icon图标-使用symbol  使用symbol定义的复用图形use里面可以使用width，height改变图形大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>


  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 1.ICON previous-->
    <symbol id="previous" viewBox="0 0 100 100">
      <path fill="currentColor" d="M 80 0,L 20 50, L 80 100 Z"></path>
    </symbol>

    <!-- 2.ICON next -->
    <symbol id="next" viewBox="0 0 100 100">
      <polygon points="20 0, 80 50, 20 100"></polygon>
    </symbol>

    <!-- 复用 -->
    <!-- <use href="#previous" width="100" height="100"></use> -->
  </svg>


  <!-- 复用 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 直接在use上指定ICON的 width和 hegiht -->
    <use href="#previous" width="50" height="50"></use>
  </svg>

  <!-- 这个属于缩小 -->
  <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" >
    <use href="#previous" ></use>
  </svg>

  <!-- 属于放大 -->
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
    <use href="#previous" ></use>
  </svg>

</body>
</html>

 6、制作精灵图，其实差不多就是在使用symbol，就是图片拼合、复用技术

这里面使用到了阿里矢量图，下载的时候选择svg文件，然后直接复制svg文件的内容到html文件中（很乱，但本来就被<svg></svg>包裹）。然后可以通过网页工具格式化内容（会被分行，条理清楚）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- 这就是一张SVG精灵图: App.vue 的template中 -->
  <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <symbol id="music" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512zm0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32zm128 640a80 80 0 1 1 48-143.634V416l-224 64v192h-1.61A80.549 80.549 0 1 1 432 592.366V384a32 32 0 0 1 32-32l224-64a32 32 0 0 1 32 32v288h-1.61A80.018 80.018 0 0 1 640 672zm-256-64a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm304-288l-224 64v64l224-64v-64zm-48 224a48 48 0 1 0 48 48 48 48 0 0 0-48-48z"/>
    </symbol>
    <symbol id="music_1" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M512 56.89c251.351 0 455.11 203.759 455.11 455.11S763.352 967.11 512 967.11 56.89 763.352 56.89 512 260.648 56.89 512 56.89zm30.037 170.665h-3.185c-13.767 0-24.576 10.468-26.226 23.666-.057.683-.285 1.195-.341 1.878-.058.455-.285.853-.285 1.308v341.618c-14.962-7.964-31.687-12.914-49.778-12.914h-71.111c-58.88 0-106.666 47.787-106.666 106.667S332.23 796.445 391.11 796.445h71.111c58.88 0 106.667-47.787 106.667-106.667 0-2.447-.569-4.722-.74-7.111h.74V305.265l76.345 44.089a28.327 28.327 0 0 0 14.165 3.811c9.842 0 19.4-5.12 24.633-14.222 7.907-13.597 3.243-31.005-10.354-38.912l-116.451-67.186c-4.38-3.072-9.387-5.29-15.19-5.29zM462.223 640c27.42 0 49.777 22.357 49.777 49.778s-22.357 49.777-49.778 49.777h-71.111c-27.42 0-49.777-22.357-49.777-49.776 0-27.422 22.357-49.779 49.777-49.779h71.111z"/>
    </symbol>
    <symbol id="shouye" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M981.638 396.91c-.5-.64-1.057-1.196-1.613-1.78L638.747 62.002C605.173 22.225 560.25.362 512.1.362h-.14c-48.26.027-93.267 22.002-126.842 61.946L43.73 394.824a33.308 33.308 0 0 0-1.67 1.78C-5.504 453.822 2.674 495.046 11.77 514.545c9.123 19.5 35.549 52.211 109.93 52.211h38.47v433.962c0 12.85 10.375 23.254 23.198 23.254h654.684c12.823 0 23.198-10.403 23.198-23.254v-430.15c0-12.824-10.375-23.227-23.198-23.227-12.824 0-23.2 10.403-23.2 23.226v406.924H679.249c.139-1.112.64-2.086.64-3.226V756.88c0-90.069-53.547-152.961-130.236-152.961h-75.744c-71.794 0-130.18 58.47-130.18 130.319v240.027c0 1.14.473 2.114.64 3.226H206.566V543.53c0-12.851-10.376-23.255-23.199-23.255H121.7c-35.049 0-60.445-9.513-67.9-25.452-7.343-15.744 1.307-40.945 23.171-67.565l341.333-332.46c.584-.584 1.14-1.168 1.641-1.808 24.73-29.736 57.413-46.147 92.072-46.175h.084c34.52 0 67.148 16.3 91.821 45.924.5.585 1.057 1.197 1.614 1.753l341.194 333.072c21.891 26.62 30.598 51.766 23.282 67.399-7.427 15.855-32.768 25.312-67.844 25.312-12.823 0-23.199 10.404-23.199 23.255 0 12.823 10.376 23.226 23.2 23.226 74.408 0 100.75-32.628 109.873-52.072 9.068-19.443 17.219-60.584-30.403-117.774zM390.125 974.265V734.238c0-46.23 37.58-83.838 83.783-83.838h75.744c50.152 0 83.838 42.781 83.838 106.48v217.385c0 1.14.5 2.114.667 3.226h-244.7c.168-1.112.668-2.086.668-3.226z"/>
    </symbol>
    <symbol id="touxiang-kong" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M512 134.092c-208.758 0-377.908 169.15-377.908 377.908S303.242 889.908 512 889.908 889.908 720.758 889.908 512 720.758 134.092 512 134.092zm0 31.432c190.952 0 346.476 155.342 346.476 346.476 0 84.484-30.342 161.883-80.669 222.02-36.337-14.898-119.731-43.786-168.786-58.32-4.36-1.272-4.906-1.636-4.906-19.441 0-14.717 5.996-29.615 11.991-42.333 6.541-13.626 13.99-36.7 16.715-57.413 7.631-8.902 18.17-26.344 24.71-59.775 5.814-29.433 3.088-40.152-.727-50.145-.363-1.09-.908-2.18-1.09-3.089-1.454-6.904.545-42.696 5.632-70.494 3.452-19.077-.908-59.593-27.071-93.205-16.534-21.258-48.329-47.239-106.287-50.872h-31.795c-57.05 3.633-88.663 29.614-105.378 50.872-26.344 33.612-30.705 74.128-27.253 93.205 5.087 27.798 7.086 63.59 5.632 70.494-.363 1.272-.726 2.18-1.09 3.27-3.815 9.993-6.722 20.713-.726 50.146 6.722 33.43 17.078 50.872 24.709 59.775 2.725 20.712 10.356 43.605 16.715 57.413 4.724 9.993 6.904 23.619 6.904 42.878 0 17.987-.727 18.168-4.724 19.44-51.054 15.08-131.904 44.15-164.244 58.14-50.69-60.32-81.214-137.9-81.214-222.566 0-190.952 155.524-346.476 346.476-346.476z"/>
    </symbol>
    <symbol id="Video" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M39.385 1024V0h945.23v1024H39.385zM196.923 78.77h-78.77v78.768h78.77V78.77zm0 157.538h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zM748.308 78.769H275.692v393.846h472.616V78.77zm0 472.616H275.692V945.23h472.616V551.385zM905.846 78.769h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77z"/>
    </symbol>
    <symbol id="video_1" viewBox="0 0 1024 1024">
        <path fill="#d81e06" d="M239.787 393.813c97.393 0 176.611-79.203 176.611-176.583S337.18 40.633 239.787 40.633c-97.366 0-176.583 79.218-176.583 176.597 0 97.38 79.203 176.583 176.583 176.583zm0-296.291c66.02 0 119.722 53.703 119.722 119.708s-53.703 119.694-119.722 119.694c-66.006 0-119.695-53.688-119.695-119.694 0-66.02 53.69-119.708 119.695-119.708z"/>
        <path fill="#d81e06" d="M175.716 217.244l-.072-3.797c-.056-1.621-.056-1.621.3-3.484a14.25 14.25 0 0 0-11.293-16.655 14.308 14.308 0 0 0-16.655 11.293 36.978 36.978 0 0 0-.796 9.785l.057 2.844a14.236 14.236 0 0 0 28.459.014zm-1.024-29.354a14.194 14.194 0 0 0 11.832-6.315 64.014 64.014 0 0 1 53.263-28.444 14.222 14.222 0 1 0 0-28.445 92.43 92.43 0 0 0-76.9 41.06 14.236 14.236 0 0 0 11.805 22.144zm463.303 205.923c97.408 0 176.611-79.203 176.611-176.583S735.403 40.633 637.995 40.633c-97.366 0-176.583 79.218-176.583 176.597.014 97.38 79.232 176.583 176.583 176.583zm0-296.291c66.033 0 119.722 53.703 119.722 119.708s-53.689 119.694-119.722 119.694c-66.006 0-119.695-53.688-119.695-119.694.015-66.02 53.704-119.708 119.695-119.708z"/>
        <path fill="#d81e06" d="M572.914 187.89a14.194 14.194 0 0 0 11.833-6.315 64 64 0 0 1 53.248-28.444 14.2 14.2 0 0 0 14.222-14.223 14.2 14.2 0 0 0-14.222-14.222 92.402 92.402 0 0 0-76.886 41.06 14.222 14.222 0 0 0 11.805 22.144zm406.343 268.956c-9.316-9.529-20.935-14.634-35.086-14.634-11.506 0-23.908 3.086-38.97 10.368a18042.596 18042.596 0 0 1-150.499 79.317l.697-10.667c.057-.697.085-2.787.085-3.498 0-55.34-44.23-103.254-98.588-103.254H128.711c-53.447 0-100.28 52.566-100.28 107.933v371.74c0 53.262 44.998 89.202 100.28 89.202h528.185c54.84 0 97.835-39.069 98.532-92.715-.015.057-.015.128-.029.029L753.92 867c37.788 18.944 96.498 49.38 150.94 78.051 1.55.825 2.973 1.536 4.665 2.077 14.806 4.551 26.596 7.68 37.96 7.751 20.266-.156 32.568-10.07 38.542-18.332 7.082-9.771 9.529-22.415 9.529-39.524v-384.17c0-11.336 1.45-38.002-16.3-56.008zm-38.898 439.566c-3.968-.938-8.206-2.26-11.164-3.171C737.877 792.519 731.22 792.348 722.773 792.348c-7.836 0-15.331 2.873-20.721 8.59-5.362 5.69-8.136 12.644-7.666 20.466l4.195 68.78c-.412 22.03-18.588 36.28-41.7 36.28h-528.17c-24.15 0-43.392-10.24-43.392-32.313v-371.74c0-24.093 21.177-51.044 43.392-51.044v-.014h528.185c22.315 0 41.202 22.3 41.685 45.468l-4.167 61.426a28.565 28.565 0 0 0 7.538 21.419 28.52 28.52 0 0 0 20.836 9.06c9.272 0 11.747-.03 208.17-105.089 3.883-1.877 6.827-2.958 8.96-3.584.342 2.546.57 6.287.484 11.876l-.043 384.483z"/>
        <path fill="#d81e06" d="M755.413 890.652l.043-.867c0 .299-.043.583-.043.867zm192.498 64.27l-.427-.028-.44.029h.867zm-192.455-65.137l.014-.327-.014.327zM286.123 499.797H165.319c-28.544 0-51.555 35.2-51.555 61.511v72.278a14.222 14.222 0 1 0 28.444-.014v-72.278c0-13.24 12.715-33.038 23.111-33.038h120.804a14.222 14.222 0 1 0 0-28.459zm71.11.015h-14.221a14.222 14.222 0 1 0 0 28.444h14.222a14.222 14.222 0 1 0 0-28.444z"/>
    </symbol>
  </svg>


  <!-- Vue 某个子组件 -->
  <svg width="50" height="50">
    <use href="#music"></use>
  </svg>
  <svg width="30" height="30">
    <use href="#music"></use>
  </svg>

  <svg width="30" height="30">
    <use href="#music_1"></use>
  </svg>

  <svg width="100" height="100">
    <use href="#shouye"></use>
  </svg>

  <svg width="400" height="400">
    <use href="#shouye"></use>
  </svg>


</body>
</html>

 

八、svg的填充和描边

1、填充和描边，边框颜色、宽度、透明度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
      color: green;
    }
  </style>

</head>
<body>


  <!-- 填充 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <defs>
      <!-- <style>
        rect{
          color: red;
        }
      </style> -->
    </defs>

    <!-- 基本的使用 -->
    <!-- <rect x="10" y="10" width="100" height="100" 
     fill="red"
     fill-opacity="0.4"
    ></rect> -->


    <rect x="10" y="10" width="100" height="100" 
      fill="currentColor"
    ></rect>
  </svg>


    <!-- 描边，边框颜色、宽度、透明度 -->
   <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >

    <rect x="10" y="10" width="100" height="100" 
      fill="transparent"
      stroke="red"
      stroke-width="3"
      stroke-opacity="1"
      
    ></rect>
  </svg>

</body>
</html>

 2、直线 的stroke-lincap(直线两端的样式，圆头、正方形头等 、 stroke-linejoin(多条直线连接处的样式) 、 dasharray(直线变虚线)  、 dashoffset(直线在可视范围内进行移动)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>
    


<!-- stroke-linecap -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line x1="100" y1="100"  x2="200" y2="100" 
      stroke="red" 
      stroke-width="5"
      stroke-linecap="round"
    >
    </line>

  </svg>


<!-- stroke-linejoin -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line x1="100" y1="100"  x2="200" y2="100" 
      stroke="red" 
      stroke-width="5"
      stroke-linecap="round"
    >
    </line>

    <polyline points="20 0, 80 50, 20 100" 
      stroke="red" 
      stroke-width="5"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="transparent"
    >
    </polyline>

  </svg>

<!-- dasharray -->  
   <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line x1="100" y1="80"  x2="200" y2="80" 
      stroke="red" 
      stroke-width="10"
      stroke-dasharray="200"
    >
    </line>

  </svg>

<!-- dashoffset -->  
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line x1="100" y1="80"  x2="200" y2="80" 
      stroke="red" 
      stroke-width="10"
      stroke-dasharray="100"
      stroke-dashoffset="10"
    >
    </line>

  </svg>


</body>
</html>

九、用css方式来填充和描边图形：4个方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
      color: green;
    }
    //方式3
    .rectangle{
      fill: blue;
    }


    //方式4 优先级第三
    <link rel="stylesheet" href="./style.css">
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >

    <!-- 方式1.属性上使用，优先级第一 -->
    <rect x="10" y="10" width="100" height="100"
     style="fill:red;"
    ></rect>
    


    <!-- 方式5.属性上使用，优先级第四 -->
    <rect x="10" y="10" width="100" height="100" fill:"red"
    ></rect>
  </svg>




   <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >

    <defs>
      <!-- 方式2.行内的样式，优先级第二 -->
      <style>
        .rectangle{
          fill: green;
          stroke: red;
        }
      </style>
    </defs>

<!-- 方式3 优先级第三 -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <rect class="rectangle" x="10" y="10" width="100" height="100"></rect>
  </svg>


</body>
</html>

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/weixin_56663198/article/details/129390023
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022