第一种直接引入:

<svg t="1684280784467" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2552" width="200" height="200"><path d="M576 631.466667V725.333333h170.666667c59.733333-8.533333 106.666667-64 106.666666-128 0-72.533333-55.466667-128-128-128-17.066667 0-29.866667 4.266667-42.666666 8.533334V469.333333c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666c0 17.066667 4.266667 29.866667 4.266667 46.933334-8.533333-4.266667-17.066667-4.266667-25.6-4.266667C260.266667 512 213.333333 558.933333 213.333333 618.666667S260.266667 725.333333 320 725.333333h170.666667v-93.866666l-46.933334 46.933333L384 618.666667l149.333333-149.333334 149.333334 149.333334-59.733334 59.733333-46.933333-46.933333z m0 93.866666v85.333334h-85.333333v-85.333334h-42.666667v85.333334h-128C213.333333 810.666667 128 725.333333 128 618.666667c0-85.333333 55.466667-157.866667 128-183.466667C273.066667 311.466667 379.733333 213.333333 512 213.333333c110.933333 0 209.066667 72.533333 243.2 170.666667 102.4 12.8 183.466667 102.4 183.466667 213.333333s-85.333333 200.533333-192 213.333334h-128v-85.333334h-42.666667z" fill="#444444" p-id="2553"></path></svg>
第二种引入:
<style>
.svg {
width: 200px;
height: 200px;
/* border: 1px solid steelblue; */
background: url(./云上传.svg);
font-size: 24px;
color: #bbb;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="svg"></div>
第三种引入:
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont icon-yunshangchuan"></span>

svg图片引入方式的更多相关文章

  1. hover状态下改变图片颜色的方式 悬停图片切换;css变量;悬停svg图片改变颜色;VUE

    由外部json文件,按照配置方式引入图片路径时,需要一些值得注意的语法来动态引入和改变图片 1.图片路径设置 ,按照img标签动态引入图片 <img src=''/> 路径不引入变量,此时 ...

  2. [javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. svg图片在vue脚手架vue-cli怎么使用

    第一种 使用vue2-svg-icon npm install vue2-svg-icon --save-dev` 下载之后在mian.js引入 名字可以随便起,这里我起icon 引入svg资源 这时 ...

  4. webpack动态配置多静态资源路径,动态配置多上线路径,配置less,多种图片引用方式----"webpack": "^4.41.6",

    1.项目场景是有两个静态资源目录,一个用于开发,一个用于发布,上线多个版本,打包多个版本后,也要部署到同一个服务器的同一个端口下. 根据我自己的摸索,我搞出来了下面的配置,自感觉还蛮好用的 先看我的c ...

  5. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  6. 关于CSS引入方式的详细见解

    关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...

  7. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  8. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  10. python 全栈开发,Day108(客户管理之权限控制,客户管理之动态"一级"菜单,其他应用使用rbac组件,django static文件的引入方式)

    一.客户管理之权限控制 昨天的作业,有很多不完善的地方 下载代码,基本实现权限验证 https://github.com/987334176/luffy_permission/archive/v1.2 ...

随机推荐

  1. 什么是离散化?C++实现方法

    简介 离散化本质上可以看成是一种 哈希 ,其保证数据在哈希以后仍然保持原来的全/偏序关系. 通俗地讲,就是当我们只关心数据的大小关系时,用排名代替原数据进行处理的一种预处理方法.离散化本质上是一种哈希 ...

  2. Codeforces Round #665 (Div. 2) A - D题题解

    成功拼手速提前过了AC两题,估计因为这个原因排名挺高的,B题晚上做的时候没绕出来,wa4发... 1401A - Distance and Axis 如果 \(n\) 小 于 \(k\) ,则必须将\ ...

  3. 阿里云 Serverless 应用引擎(SAE)2

    8月7日,阿里云 Serverless 应用引擎(SAE)2.0正式公测上线!全面升级后的SAE 2.0具备极简体验.标准开放.极致弹性三大优势,应用冷启动全面提效,秒级完成创建发布应用,应用成本下降 ...

  4. 通义千问预体验,如何让 AI 模型应用“奔跑”在函数计算上?

    立即体验基于函数计算部署通义千问预体验: https://developer.aliyun.com/topic/aigc_fc AIGC 浪潮已来,从文字生成到图片生成,AIGC 的创造力让人惊叹,更 ...

  5. C# 序列化器

    理论知识: 序列化是指将对象转换成字节流,从而存储对象或将对象传输到内存.数据库或文件的过程. 它的主要用途是保存对象的状态,以便能够在需要时重新创建对象. 反向过程称为"反序列化" ...

  6. WebApi使用Swagger

    services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API ...

  7. Mygin实现动态路由

    本篇是Mygin的第四篇 目的 使用 Trie 树实现动态路由解析. 参数绑定 前缀树 本篇比前几篇要复杂一点,原来的路由是用map实现,索引非常高效,但是有一个弊端,键值对的存储的方式,只能用来索引 ...

  8. 【面试题精讲】为什么G1收集器不需要调优性能也很优秀

    G1(Garbage-First)收集器是一种面向服务器端应用的垃圾回收器,它在JDK 7u4版本中首次引入,主要用于替代CMS(Concurrent Mark Sweep)收集器.相比于其他垃圾回收 ...

  9. [转帖]Docker最佳实践:5个方法精简镜像

    https://juejin.cn/post/6844903880526921741   精简Docker镜像的好处很多,不仅可以节省存储空间和带宽,还能减少安全隐患.优化镜像大小的手段多种多样,因服 ...

  10. [转帖]TLB缓存是个神马鬼,如何查看TLB miss?

    https://zhuanlan.zhihu.com/p/79607142 介绍TLB之前,我们先来回顾一个操作系统里的基本概念,虚拟内存. 虚拟内存 在用户的视角里,每个进程都有自己独立的地址空间, ...