uni-app 如何使用svg

最新推荐文章于 2024-08-05 17:33:05 发布

前端布道人

最新推荐文章于 2024-08-05 17:33:05 发布

阅读量6.5k

点赞数 25

分类专栏：前端面试题前端跨平台开发前端杂货铺文章标签： uni-app

本文链接：https://blog.csdn.net/BradenHan/article/details/138095399

版权

前端杂货铺同时被 3 个专栏收录

287 篇文章 1 订阅

订阅专栏

前端面试题

157 篇文章 2 订阅

订阅专栏

前端跨平台开发

18 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在uni-app中使用SVG，包括直接引用SVG文件、通过base64编码、iconfont服务、自定义SVG组件以及实现SVG动画的方法。适合开发者根据项目需求选择合适的方式。

摘要由CSDN通过智能技术生成

uni-app 如何使用svg

uni-app 如何使用svg

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。

下面分别举例说明：

1. 直接引用SVG文件

虽然uni-app本身可能不直接支持<svg>标签，但可以通过以下方式间接使用：

a. 作为Image组件的源

将SVG文件作为静态资源放入项目中，然后通过<image>组件的src属性引用。这种方法适用于静态SVG图像。

示例：

<!-- 在.vue文件的template部分 -->
<template>
  <view>
    <image :src="'/static/images/my-svg.svg'" mode="aspectFit"></image>
  </view>
</template>

确保SVG文件（例如my-svg.svg）已放置在项目的static/images/目录下。

b. 作为Background Image

如果需要将SVG作为背景图，可以将其转换为base64编码，然后在CSS中使用background-image属性引用。

示例：

<!-- 在.vue文件的template部分 -->
<template>
  <view class="svg-background">
    <!-- 内容 -->
  </view>
</template>

<style scoped>
.svg-background {
  background-image: url("data:image/svg+xml;utf8,<svg>...svg内容...</svg>");
  /* 或者使用base64编码：
  background-image: url(data:image/svg+xml;base64,PHN2ZyAuLi4=); */
  background-size: cover; /* 或其他合适的背景尺寸控制 */
}
</style>

请注意，由于uni-app对本地背景图的限制，可能需要将SVG文件上传到远程服务器并使用完整URL引用。

2. 使用base64编码

将SVG文件转换为base64编码，然后以数据URI的形式嵌入到HTML或CSS中。这样可以避免外部文件的引用限制。

示例：

假设您已经将SVG文件转换为base64编码，得到如下字符串：

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJyZWQiLz4KPC9zdmc+

然后在uni-app项目中使用：

<!-- 在.vue文件的template部分 -->
<template>
  <view>
    <image :src="'data:image/svg+xml;base64,' + svgBase64Data" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      svgBase64Data: 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJyZWQiLz4KPC9zdmc+'
    };
  }
};
</script>

3. 使用iconfont服务

从iconfont.cn等平台获取SVG图标，并将其作为symbol合集引入项目。这通常涉及以下步骤：

a. 在iconfont.cn上挑选并添加所需图标到项目，选择Symbol导出方式。

b. 下载项目并解压，找到生成的iconfont.js文件。

c. 将iconfont.js文件复制到uni-app项目的适当位置（如static/js/目录）。

d. 在项目的main.js中引入该文件：

// main.js
import './static/js/iconfont.js';

e. 在.vue文件中使用图标：

<template>
  <view>
    <svg>
      <use xlink:href="#icon-caomei"></use> <!-- "icon-caomei"为svg对应的id -->
    </svg>
  </view>
</template>

4. 自定义SVG组件

如果您需要更精细的控制或复用SVG元素，可以创建一个自定义Vue组件，封装SVG代码：

示例：

<!-- MyCustomSVG.vue -->
<template>
  <svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" fill="blue" />
    <!-- 更多SVG元素... -->
  </svg>
</template>

<script>
export default {
  name: 'MyCustomSVG'
};
</script>

在需要使用的地方：

<template>
  <view>
    <my-custom-svg></my-custom-svg>
  </view>
</template>

<script>
import MyCustomSVG from '@/components/MyCustomSVG.vue';

export default {
  components: {
    MyCustomSVG
  }
};
</script>

5. SVG动画

若要使用SVG进行动画制作，可以结合AI等工具绘制SVG，并将其转换为base64编码或引用SVG文件，然后利用JavaScript（如requestAnimationFrame）或CSS（如@keyframes）来驱动动画。确保在生命周期钩子如mounted()中初始化动画，并在destroyed()中清理。

综上所述，uni-app中使用SVG有多种途径，具体选择哪种方法取决于项目的具体需求和SVG的具体用途（静态图像、图标、动画等）。

上述示例提供了直接引用、base64编码、iconfont服务、自定义组件以及动画制作等方面的指导。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。