【css3】使用filter屬性實現改變svg圖標顏色

1.兼容性：

2.應用場景：新增頁面上傳svg圖標後，更改圖標顏色後，在列表頁面展現色值改後的svg圖標。

3.解決方案：使用filter屬性中的 drop-shadow，drop-shadow濾鏡能夠給元素或圖片非透明區域添加投影。

css:

.con-right-iocn-img {
    display: inline-block;
    width: 34px;
    height: 34px;
    overflow: hidden;
}
.con-right-iocn-img > .icon {
    position: relative;
    left: -34px;
    border-right: 34px solid transparent;
    -webkit-filter: drop-shadow(34px 0);
    filter: drop-shadow(34px 0);
}
或者
.con-right-iocn-img > .icon {
   　transform: translateX(-100%);
    -webkit-filter: drop-shadow(34px 0);
    filter: drop-shadow(34px 0);
}

 

html:

<div class="con-right-iocn-img">
　　<img class="icon con-right-iocn-img" src="<?php echo Yii::app()->request->baseUrl . '/' . $v['backimg']; ?>" style="color:rgb(<?php echo $v['color'];?>)"/>
</div>

4.效果

 

相關文檔：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

　　　　　http://www.javashuo.com/article/p-rlbiqtxb-gy.html

做者：smile.轉角

QQ：493177502