首页 > 其他分享 >svg图片引入方式

svg图片引入方式

时间:2023-05-17 13:44:06浏览次数:36  
标签:color svg 50% 引入 图片 200px

第一种直接引入:

<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>

标签:color,svg,50%,引入,图片,200px
From: https://www.cnblogs.com/StevenYF/p/17407506.html

相关文章

  • 全球最大照片网站 Unsplash 开放图片检索数据集
    By超神经内容概要:全球最大的照片网站 Unsplash宣布平台已经开放了超过20万名摄影师的近200万张免费图片的,并开放了两个图片检索结果的数据集。关键词:数据集图片搜索图像分类Unsplash是世界上最大的照片摄影网站之一,由全世界20多万摄影师参与,贡献了数百万张高清优质的摄......
  • 支持复制粘贴word图片的eWebEditor编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • html css 实现图片扫描特效
     实现这个特效需要做3个层,所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。大体结构是一个容器,容器里放3个层,底层是4个角的边框效果容器,中间层是要扫描的图片容器,顶层是扫描线容器,这3个层通过z-index来实现层级,它们的高宽度都取父容器的高宽度inherit......
  • JAVA实现html代码转为图片
    方法一:html2Image1、引入依赖<dependency><groupId>gui.ava</groupId><artifactId>html2image</artifactId><version>2.0.1</version></dependency>2、代码实现@ComponentpublicclassHtmlUtil{/***......
  • 如何在不改变图片分辨率的情况下增加图片的大小
    应某人要求将一张原图分辨率820x1148,大小83.5kb,格式为jpg的图片变成分辨率260x390,大小200kb以上1mb以下,格式为jpg的图片。网上各种无损增大图片的方法,都无一例外的改变了图像的分辨率,最终只找到两种能够不改变图像分辨率的情况下增加图片大小的方法。下面分享一下这两种方法:一......
  • ps修改图片内容渐变
    ps修改图片文字1.打开图片复制图层2.用选框工具框中需要修改的文字,右击鼠标,在选项框中选择填充,在弹出的窗口中,选中颜色或者是内容识别都是可以的,这里我选择的是颜色,点击颜色,然后在弹出的拾色器中选择颜色,也可以直接把鼠标放在画面中,点击一下我们需要的颜色的地方,颜色也就出来3......
  • 图片生成网站
    以下是一些可以从文本描述生成图片的工具:Dezgo:可以从文本提示生成图片。AIInput:基于文本输入快速创建图片。Lightricks:为个性化和独特的视觉效果生成图片。TexttoImageEditor:为设计和插图生成文本图片。IMGCreator:为图形和插图生成图片。以下是一些可以生成矢量卡通风......
  • 阿里图标 代码引入
    1.将选好的项目添加到小车内2.点上方小车图标,将图标添加到对应的小车内3.添加完成后,下载图标压缩包            4.将上图的文件引入到项目文件中,主要文件为:iconfont.css文件,图中圈起来的icon-jixie 就是引入的图标名称引入时,只需要将对应的 ......
  • JPG文件格式解码图片高度和宽度的分析
    13.简单说一下JPG文件的解码-------------------------解码程序先从JPG文件中读出采样系数,这样就知道了MCU的大小,算出整个图象有几个MCU.解码程序再循环逐个对MCU解码,一直到检查到EOI标记.对于每个MCU,按正规的次序解出每个DU,......
  • 几个jQuery的图片裁剪插件
    项目里最近也要用到图片裁剪插件,刚巧发现了几个就记录在这里。[color=blue][b]imgAreaSelect[/b][/color]官方:[url]http://odyniec.net/projects/imgareaselect/[/url]这个插件是目前比较常见的cooper插件,功能也很齐全:自定义选择框的CSS样式键盘快捷键支持添加事件回调锁......