首页uni-app 如何使用svg

uni-app 如何使用svg

时间: 2025-01-29 15:15:27 浏览: 61

在uni-app中使用SVG可以通过以下几种方式实现： 1. **使用image标签**：你可以将SVG文件作为图片资源引入，然后使用`<image>`标签进行展示。 ```html <template> <image src="/static/icons/example.svg" mode="widthFix"></image> </template> ``` 2. **使用uni-icons组件**： uni-app提供了内置的`uni-icons`组件，可以方便地使用SVG图标。 ```html <template> <uni-icons type="home" size="30"></uni-icons> </template> ``` 3. **使用svg.js库**：如果你需要动态操作SVG，可以使用第三方库如`svg.js`。首先，安装`svg.js`： ```bash npm install @svgdotjs/svg.js ``` 然后，在页面中使用： ```html <template> <div ref="svgContainer"></div> </template> <script> import { SVG } from '@svgdotjs/svg.js' export default { mounted() { const draw = SVG().addTo(this.$refs.svgContainer).size(300, 300) draw.rect(100, 100).fill('#f06') } } </script> <style> div { width: 300px; height: 300px; } </style> ``` 4. **使用CSS背景**：你也可以将SVG作为CSS背景图片使用。 ```html <template> <div class="svg-background"></div> </template> <style> .svg-background { width: 100px; height: 100px; background-image: url('/https/wenku.csdn.net/static/icons/example.svg'); background-size: contain; background-repeat: no-repeat; } </style> ``` 通过以上几种方法，你可以在uni-app中灵活地使用SVG图标和图形。

阅读全文