Web前端笔记-HTML加载SVG图片及简单修改
Posted IT1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端笔记-HTML加载SVG图片及简单修改相关的知识，希望对你有一定的参考价值。
加载的用img标签，就可以了，就把他当成普通图片即可，如：
<img src="icon/cash-coin.svg" />图片是这样的：
在前端的效果就这样了。
简直无法看清，修改下。打开svg，从中看到几个参数：
width为宽，height为高，fill为填充的颜色，
改成这样，同时图片也变了：
看看界面：
现在这个好看多了。
本笔记使用到的SVG为cash-coin.svg
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="rgb(255,255,255)" class="bi bi-cash-coin" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
<path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"/>
<path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1H1z"/>
<path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z"/>
</svg>以上是关于Web前端笔记-HTML加载SVG图片及简单修改的主要内容，如果未能解决你的问题，请参考以下文章