引入 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并使用的代码,不懂得也可以在评论区里问我,以后会持续添加一些新的功能,敬请关注。