img： SVG格式在vue中的使用
2024-04-21 06:22:19
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>
img： SVG格式在vue中的使用相关推荐
- three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果 如上图,该dem ...
- 解决：Svg图标，vue中使用 .svg 文件
解决:颜色不能切换 1.使用插件 npm i svg-sprite-loader 2.webpack.base.conf.js 文件中配置 module: {rules: [{test: /\.svg ...
- 在Vue中使用svg格式字体图标
在Vue中使用svg格式字体图标 1.新建一条分支,在新分支上修改,测试无误后合并到开发分支(建议) 2.先安装svg-sprite-loader ( 在打包时 处理svg格式并展示到项目中的过滤器 ...
- vue中eslint报Disallow self-closing on HTML void elements格式错误时的解决方案
当vue中eslint报Disallow self-closing on HTML void elements格式错误时 我们需要在eslint中的rules里配置 'vue/html-self-cl ...
- vue中使用svg图片
1.安装依赖包 svg-sprite-loader npm install svg-sprite-loader --save-dev 2.配置svg图片使用svg-sprite-loader来编译-- ...
- Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
- Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入 在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
- aip格式转化为pdf_python提取pdf文档中的表格数据、svg格式转换为pdf
提取pdf文件中的表格数据原文链接 https://www.analyticsvidhya.com/blog/2020/08/how-to-extract-tabular-data-from-pdf- ...
- java get请求 数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
最新文章
- 结合zuul网关的鉴权流程
- bi可视化工具_适用于您的BI解决方案的最佳数据可视化和Web报告工具
- Linux发邮件之mail命令
- java正则表达 w,超强变态的正则(\w)((?=\1\1\1)(\1))+讲解
- 对于如何打造一个成功的项目
- 查看某个进程的线程在干什么_有了多线程，为什么还要有协程？
- C#入门篇5-3:流程控制语句 for
- 谷歌浏览器老是出现花_Google全新的AI平台值得您花时间吗？
- Oracle Exadata一体机简介
- Mac升级文件不见了怎么恢复？
- dCas9-ROS1——靶向去甲基化的捷径
- 永远的美女......
- 【MySQL基础】04：DQL数据查询语言
- AFN TTP状态 412 - 前置条件失败
- 初识Matlab以及Matlab一般性教程
- C语言如何清除控制台特定的一行，及'\b'字符的使用
- 《挑战程序设计竞赛》--初级篇习题POJ部分【动态规划】
- 索尼x91l和x91k区别 索尼x91l和索尼x91k哪个好
- 小程序与共享图书的融合
- zimbra mysql stopping_Zimbra中的MySQL