svg 组件用法 -- defs标签使用

本文讲解了SVG中如何通过defs标签实现图形元素的复用,包括如何定义和引用图形组件,以及如何改变克隆元素的位置和尺寸。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

案例

在svg中关于图形的复用,是通过标签defs来解决的。
举个例子:
在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的,只是颜色和位置的差别。

在这里插入图片描述

解决方案

defs: 被引用元素的容器 – 这很好理解相当于vue中的component

g: group缩写 无实意。相关元素整合的容器 < id作为该的唯一标识 >

  • 组件

在这里插入图片描述

  • 引用

use: 使用url引用一个 , 或其他具有一个唯一的ID属性和重复的图形元素。

x=“克隆元素的左上角的x轴”
y=“克隆元素的左上角的y轴”
width=“克隆元素的宽度”
height=“克隆元素的高度”
xlink:href=“URI引用克隆元素” < 特别注意: 引用ID需要加 #ID >
在这里插入图片描述

<template> <view class="progress-container"> <!-- 外层刻度 --> <view class="scale-container"> <view v-for="(item, index) in 12" :key="index" class="scale-item" :style="{ transform: `rotate(${index * 30}deg)`, backgroundColor: progress >= 100 ? '#5BCEFF' : '#3B82F6' }" ></view> </view> <!-- 进度条 --> <view class="progress-wrapper"> <svg class="progress-svg" viewBox="0 0 100 100" > <!-- 背景圆环 --> <circle cx="50" cy="50" :r="radius" fill="none" stroke="#F2F7FF" :stroke-width="strokeWidth" /> <!-- 进度圆环 --> <circle cx="50" cy="50" :r="radius" fill="none" :stroke="progress >= 100 ? 'url(#gradientComplete)' : 'url(#gradientIncomplete)'" :stroke-width="strokeWidth" :stroke-dasharray="circumference" :stroke-dashoffset="dashOffset" stroke-linecap="round" transform="rotate(-90 50 50)" /> <!-- 渐变色定义 --> <defs> <linearGradient id="gradientIncomplete" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#F2F7FF" /> <stop offset="100%" stop-color="#3B82F6" /> </linearGradient> <linearGradient id="gradientComplete" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#5BCEFF" /> <stop offset="100%" stop-color="#4BFF75" /> </linearGradient> </defs> </svg> <!-- 中间内容 --> <view class="progress-content"> <slot></slot> </view> </view> </view> </template> <script setup> import { computed } from 'vue' const props = defineProps({ progress: { type: Number, default: 0, validator: value => value >= 0 && value <= 100 }, // 圆环半径(基于viewBox的百分比) radius: { type: Number, default: 40 }, // 圆环宽度(基于viewBox的百分比) strokeWidth: { type: Number, default: 5 } }) // 计算圆周长 const circumference = computed(() => 2 * Math.PI * props.radius) // 计算进度偏移量 const dashOffset = computed(() => { const progress = Math.min(Math.max(props.progress, 0), 100) return circumference.value * (1 - progress / 100) }) </script> <style lang="scss" scoped> .progress-container { position: relative; width: 300rpx; height: 300rpx; display: flex; justify-content: center; align-items: center; } .progress-wrapper { position: relative; width: 100%; height: 100%; } .progress-svg { width: 100%; height: 100%; transform: rotate(0deg); } .progress-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; } .scale-container { position: absolute; width: calc(100% + 20rpx); height: calc(100% + 20rpx); top: -10rpx; left: -10rpx; } .scale-item { position: absolute; width: 4rpx; height: 10rpx; top: 0; left: 50%; transform-origin: 50% 150rpx; border-radius: 2rpx; } </style> 帮我将这个组件转化为可以适配Android,ios,小程序,pc得uniapp vue3代码
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值