img： SVG格式在vue中的使用

SVG格式在vue中的使用SVG：svg是一种图像文件格式，它是可缩放的矢量图形，它是基于XML，由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通

寂寞々先生

15563人浏览 · 2020-05-24 17:48:13

寂寞々先生 · 2020-05-24 17:48:13 发布

在这里插入图片描述

SVG格式在vue中的使用

SVG：svg是一种图像文件格式，它是可缩放的矢量图形，它是基于XML，由World Wide Web Consortium
（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、
高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打
开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

我们可以在阿里巴巴矢量图标库里面下载

[阿里巴巴矢量图标库](https://www.iconfont.cn/search/index?searchType=icon&q=search)

在这里插入图片描述
然后插入到vue的项目中

在这里插入图片描述

第一种方法：通过img引入svg

<template>
  <div id="app">
    <main>
    <!-- 在这里引用 -->
      <img :src="imgs" alt />
    </main>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
    //导入图片的路径
      imgs: require("../src/assets/icons/search.svg")
    };
  }
};

第二种方法：直接引入svg

在这里插入图片描述

<template>
  <div id="app">
    <main>
      <svg t="1590308172744" class="icon search" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2385" width="32" height="32">
        <path d="M400.704 801.408A400.64 400.64 0 1 1 400.704 0a400.64 400.64 0 0 1 0 801.408z m0-89.024a311.68 311.68 0 1 0 0-623.36 311.68 311.68 0 0 0 0 623.36z m267.264-110.4l314.752 314.88-62.912 62.912-314.816-314.816 62.976-62.976z" p-id="2386">
        </path>
      </svg>
    </main>
  </div>
</template>
<style lang="scss">

//svg可以改图片的颜色不过不是用color  *******而是用 fill: #f00;**********
									*****************************
.search {
  width: 100px;
  height: 100px;
  fill: #f00;
}
</style>

如果在项目中这么写的话很是繁琐，不利于后期的维护，所以我们还可以这么写

在这里插入图片描述
亲们！找到自己的图片后添加到购物车 ----点击下载代码----

然后打开下载好的文件夹然后打开 demo_index.html

在这里插入图片描述

这里呢我选择使用 symbol 里面有具体的使用步骤以及浏览器的兼容设置

多个svg图合成：svg sprites

第一步：从iconfont挑选图标加入购物并下载

第二步：解压并打开xxx.html，找到symbol复制其中的svg代码

第三步：粘贴到vue项目public中的index.html中

<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;"><symbol id="icon-icon-test" viewBox="0 0 1024 1024"><path d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160" fill="#000000"></path><path d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352" fill="#000000"></path></symbol><symbol id="icon-icon-test1" viewBox="0 0 1024 1024"><path d="M512 818.752l-320-320V301.248L301.248 192h421.504L832 301.248v197.504l-320 320zM886.624 265.376l-128-128A31.808 31.808 0 0 0 736 128H288a31.808 31.808 0 0 0-22.624 9.408l-128 127.968A31.904 31.904 0 0 0 128 288v224c0 8.832 3.584 16.832 9.376 22.656l352 351.968a31.904 31.904 0 0 0 45.248 0l352-352c5.792-5.792 9.376-13.792 9.376-22.624V288a31.904 31.904 0 0 0-9.376-22.624z" fill="#181818"></path><path d="M320 384h384v-64H320z" fill="#181818"></path></symbol><symbol id="icon-icon-test2" viewBox="0 0 1024 1024"><path d="M832 160c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64-28.8-64-64-64" fill="#181818"></path><path d="M320 480h384v-64H320z" fill="#181818"></path><path d="M320 608h256v-64h-256z" fill="#181818"></path><path d="M320 736h256v-64h-256z" fill="#181818"></path><path d="M800 352v512H224V224h96v64h384V96H320v64H192c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h640c19.2 0 32-12.8 32-32V352h-64zM384 160h256v64h-256V160z" fill="#181818"></path></symbol><symbol id="icon-icon-test3" viewBox="0 0 1024 1024"><path d="M512 896C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384m0-832C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64" fill="#181818"></path><path d="M416 345.728L704 512l-288 166.272V345.728zM800 512c0-11.84-6.72-21.728-16.256-27.264l0.256-0.448-384-221.728-0.256 0.48A30.912 30.912 0 0 0 384 258.304a32 32 0 0 0-32 32v443.392a32 32 0 0 0 32 32 30.912 30.912 0 0 0 15.744-4.736l0.256 0.448 384-221.696-0.256-0.448A31.584 31.584 0 0 0 800 512z" fill="#181818"></path></symbol><symbol id="icon-icon-test4" viewBox="0 0 1024 1024"><path d="M192 768v-50.752l56.384-56.384 46.144-46.144 0.096-0.096-0.416-0.416A253.984 253.984 0 0 1 256 480a256 256 0 0 1 512 0c0 49.28-14.048 95.2-38.208 134.208l-0.416 0.416 0.096 0.096 46.144 46.144L832 717.248V768H192z m320 128a64 64 0 0 1-64-64h128a64 64 0 0 1-64 64z m374.624-214.656l-79.072-79.04A317.088 317.088 0 0 0 832 480c0-165.664-126.528-302.272-288-318.368V96h-64v65.632C318.528 177.728 192 314.336 192 480c0 43.328 8.736 84.608 24.448 122.304l-79.072 79.04A32.032 32.032 0 0 0 128 704v128h256c0 70.592 57.408 128 128 128s128-57.408 128-128h256v-128c0-8.832-3.584-16.832-9.376-22.656z" fill="#181818"></path></symbol><symbol id="icon-icon-test5" viewBox="0 0 1024 1024"><path d="M832 708.096v120.864C494.816 798.4 225.6 529.184 195.04 192h196.544l27.136 101.312-23.776 6.368-61.728 16.544c5.12 20.896 11.456 41.28 19.072 61.12a516.032 516.032 0 0 0 297.632 296.832c19.872 7.552 40.256 13.888 61.184 18.976l16.544-61.76 6.688-24.96L832 632.64v75.456z m42.4-129.984l0.096-0.32-123.616-33.12 0.032-0.128-30.912-8.32a31.936 31.936 0 0 0-33.568 11.36 32.32 32.32 0 0 0-5.696 11.392l-8.256 30.944h0.032l-5.984 22.24a451.84 451.84 0 0 1-252.224-251.392l20.992-5.664 0.032 0.096 30.912-8.32a32 32 0 0 0 22.624-39.168l-41.408-154.56-0.8 0.224A31.52 31.52 0 0 0 416 128H160.832c-18.496 0-32.864 15.616-31.968 34.112 0.512 10.016 1.184 19.968 2.016 29.888C161.792 564.48 459.52 862.208 832 893.12c9.92 0.832 19.872 1.504 29.888 2.016a32.224 32.224 0 0 0 34.112-32V608a31.68 31.68 0 0 0-21.6-29.856z" fill="#181818"></path></symbol></svg>

第四步：使用svg

 <svg class="icon" aria-hidden="true">
 	
          <use xlink:href="#icon-挑选的图标名"></use>
          
 </svg>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^