在 img元素中增加svg并控制svg的颜色、大小,代码如何写
时间: 2024-05-10 13:14:07 浏览: 220
可以通过在 img 元素中使用 data URI 和 SVG 格式的图片来实现。以下是一个示例代码片段,其中包括一个 SVG 图片和 CSS 样式,用于控制 SVG 图片的大小和颜色:
```html
<style>
/* 控制 SVG 图片的宽度和高度 */
img.svg {
width: 100px;
height: 100px;
}
/* 控制 SVG 图片的颜色 */
img.svg path {
fill: red;
}
</style>
<!-- 在 img 元素中使用 SVG 图片 -->
<img class="svg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiB2aWV3Qm94PSIwIDAgNjQgNjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojRkZGRkZGO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDo0cHg7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjRweDtwb3NpdGlvbjphYnNvbHV0ZTt9PC9zdHlsZT48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDAgNjQgNjQpIj48ZyBzdHlsZT0iZmlsbDojRkZGRkZGO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDo0cHg7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjRweDtwb3NpdGlvbjphYnNvbHV0ZTt9IHRyYW5zbGF0ZSgxIDAgNjQgNjQpIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDkuMzQ5LDE3LjUwM2MwLjU2NiwwLjU2NiwwLjU2NiwxLDAuNTY2LDEuNTAzbC0xNS4wNzEtMTUuMDc1QzQ4LjgzMiwxNC4wNzUsNDYuMDY5LDE1LjA3NSw0OS4zNDksMTcuNTAzeiIvPjwvZz48L3N2Zz4=">
```
在这个示例中,SVG 图片以 base64 编码的方式嵌入了 data URI 中。CSS 样式用于控制 SVG 图片的大小和颜色。注意,SVG 图片的路径选择器用于控制 SVG 图片的颜色。
阅读全文