三种方式：object、embed、mask引用 Svg 并更改样式

1、使用Object、embed标签引入

html

<div class="item">
  <object data="test.svg" type="image/svg+xml"></object>
  <embed src="test.svg" type="image/svg+xml" />
</div>

更改颜色，大小可通过css处理

.item {
  overflow: hidden;
  object,embed {
    cursor: pointer;
    filter: drop-shadow(#000000 0px -100px);
    transform: translate(0px, 100px);
  }
}

PS：采用投影的方式将其改变色值， drop-shadow，须将父元素设置为

overflow: hidden;

即可！

---

2、使用 CSS mask 引入

html

<div class="item"></div>

css

.item{
    mask: url("/test.svg") no-repeat center center;
    mask-size: contain;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.9);
}

---

3、使用image标签引入

.item{
	overflow: hidden;
	image {
		position: relative;
		left: -80px;
		filter: drop-shadow(#fff 80px 0);
	}
}

---

4、使用字体库iconfont引入 iconfont