如何引入svg并使用

简介: 如何引入svg并使用

引入 svg 的方法

1. 通过 img 引入 svg

1.svg 标签直接在页面中

// 使用 img 方法引入
<img src="@/assets/商家/favorite.svg" />

2.通过img引入的svg文件

此时css对svg文件无法生效,此时要用到CSS3滤镜filter中的drop-shadow,通过生产一个可指定颜色的阴影放置于svg的位置,并将原始svg移出视线,可以在父元素设置一个 overflow:hidden 超出不显示,这样原始 svg 就看不见了

.box{
  img{
    filter: drop-shadow(rgb(240, 20, 20) 100px 0);
      transform: translateX(-100px);
  }
}

2. 直接把 svg 图片写进 html 代码里

给 svg 写入 fill 给变颜色(html 代码)

<svg
 xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="768"
  height="768"
  viewBox="0 0 768 768"
  // 颜色改为红色
  fill="red"
>
  <path
    d="M736.5 319.5l-1.5 3h1.5v61.5q0 12-4.5 24l-97.5 225q-15 39-58.5 39h-288q-25.5 0-45-19.5t-19.5-45v-319.5q0-25.5 19.5-45l210-211.5 34.5 34.5q13.5 13.5 13.5 33v10.5l-31.5 147h202.5q25.5 0 45 18.75t19.5 44.25zM31.5 672v-384h129v384h-129z"
  />
</svg>

(css 代码,样式)

svg{
  width: 20px;
  height 20px;
}

以上就是引入svg并使用的代码,不懂得也可以在评论区里问我,以后会持续添加一些新的功能,敬请关注。

相关文章
|
3月前
|
XML JavaScript 前端开发
SVG学习
【10月更文挑战第1天】
58 3
|
3月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
47 0
|
8月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
89 2
|
8月前
|
前端开发
css的基础结构
【4月更文挑战第14天】css的基础结构
57 6
|
8月前
|
XML JavaScript 前端开发
如何在VUE项目中引入SVG图标
如何在VUE项目中引入SVG图标
198 0
|
前端开发
CSS 引入方式
CSS 引入方式
|
XML 前端开发 JavaScript
使用 svg-sprite-loader 批量引入 icon
使用 svg-sprite-loader 批量引入 icon
245 0
|
前端开发
react中引入svg
react中引入svg
141 0
|
前端开发
三种引入css的方法
三种引入css的方法
184 0
|
前端开发 Android开发
css引入
最近使用eclipse写前端,反正都是编译软件,用哪个不是用 css的三种引入方式:1、行内式引入,使用style属性在特定的HTML标记内插入CSS代码,语法“<标签名 style="css样式">..</标签名>”;2、嵌入式引入,在文档head部分的style标签对中放入CSS代码,语法“<style>样式</style>”;3、外部引入,将CSS代码放入外部CSS文件中,使用link标签或“@import”规则引入html文档中。
96 0