fuckok 2023-07-20 15:00 采纳率: 8.3%
浏览 35
已结题

vue如何循环渲染svg图

问一下，vue如何循环渲染svg图，想做成这个效果，左侧有几个数据，右侧就有几个圆圈图

img


代码如下，这框起来的是一套圆圈图，但是这里面的数据是动态的，vue如何渲染

img

  • 写回答

2条回答 默认 最新

  • 二九筒 2023-07-20 16:00
    关注

    vue本身就是响应式渲染的，把这些动态数值都定义在data里面，然后在用js改变这些data值就行了；

    评论

报告相同问题？

  • vue动态渲染svg、添加点击事件的实现
    2020-10-15 12:40
    当我们在Vue项目中需要动态渲染SVG以及为SVG图形添加交互功能时，如点击事件，我们需要了解如何结合这两个技术。接下来，我们将详细介绍Vue动态渲染SVG以及为SVG添加点击事件的实现过程。 ### Vue动态渲染SVG 在...
  • vue动态渲染SVG颜色
    2025-09-17 11:28
    weixin_46637268的博客 本文介绍了在Vue项目中集成SVG图标的完整流程：1)安装svg-sprite-loader；2)创建SVG目录存放图标文件；3)配置webpack处理SVG文件；4)创建可复用的SvgIcon组件；5)在main.js中全局注册组件并引入SVG文件；6)处理SVG...
  • vue 中渲染svg 图片，组件封装（vue+vite+ts版本）
    2022-12-01 11:35
    mxlWhb的博客 渲染svg图片，ts版本
  • 基于vue+websocket+svg的前端实时地图监控方案.zip
    2023-07-13 14:29
    本方案"基于vue+websocket+svg的前端实时地图监控"就是针对这一需求提出的一种解决方案。Vue.js作为一个轻量级、高效的JavaScript框架，提供了便捷的组件化开发方式；WebSocket则为实现双向通信提供了可能，确保了...
  • 如何在vue中使用svg图片及修改样式
    2024-11-05 20:20
    半夏の微凉的博客 你可以根据项目的具体需求选择适合的方法。如果需要动态控制 SVG 的样式或行为，建议使用嵌入或方法；如果只是需要显示静态图标，使用标签或 CSS 背景图会更简单。...这也是 SVG 在前端开发中越来越受欢迎的原因之一。
  • 使用Vue和D3的强大功能构建SVG地图.zip
    2023-07-13 14:29
    Vue作为一个轻量级的前端框架，提供了组件化开发、响应式数据绑定等特性，而D3则是一个强大的数据驱动的绘图库，特别适合用于创建复杂的SVG图形。 Vue.js是基于MVVM模式的渐进式框架，它的核心理念是使开发者能够...
  • vue动态加载SVG文件并修改节点数据的操作代码
    2020-10-14 21:53
    然后，使用`Vue.extend`创建组件实例，并挂载到页面上的某个元素上，使得SVG能够渲染到页面上。 在实际开发过程中，可能会遇到以下挑战： - **跨域问题**： SVG文件可能存储在与Vue应用不同的源上，这会导致跨域...
  • vue 使用svg渲染地图
    2022-02-11 10:07
    卷毛崽的博客 1、找ui要到的svg图片，把其中path的值赋值过来，所有数据一起组成一个json文件 Json文件 { "svgArr": [{ "d":"M440.9,128.9l25,16.3l9.5,32.3l9.5,4.3v6.3h7.5l13.3,7l2,8.5l24.5,9l4.4,3.3L530,222l2.9,15l11.8...
  • vue3中使用svg图片
    2023-03-12 16:04
    grand_brol的博客 文件夹中包括svg文件用来存放svg图片，index.js index.js中 const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll...
  • vue中动态渲染echarts地图（svg）
    2024-01-24 00:17
    weixin_48401572的博客 在vue中动态渲染echarts地图系列
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 7月27日
  • 创建了问题 7月20日