在循环中调用SVG.js ()不起作用

SVG.js 是一个用于创建和操作可缩放矢量图形（Scalable Vector Graphics）的JavaScript库。它提供了一组简单易用的API，使开发者能够轻松地在网页中绘制和操作SVG图形。

在循环中调用 SVG.js 的问题可能是由于以下几个原因导致的：

作用域问题：在循环中调用 SVG.js 时，可能存在作用域的问题。确保 SVG.js 库在循环之外正确加载，并且在循环内部可以访问到。
元素重复创建问题：如果在循环中多次调用 SVG.js 创建相同的元素，可能会导致元素重叠或覆盖。确保在每次循环迭代中创建唯一的元素，或者在每次循环之前清除之前创建的元素。
循环速度过快问题：如果循环速度过快，可能会导致 SVG.js 的操作无法及时生效。可以尝试在每次循环迭代之后添加适当的延时，以确保 SVG.js 的操作能够正确执行。

总结起来，确保 SVG.js 库正确加载并且在循环内部可以访问到，避免重复创建元素，适当控制循环速度，可以解决在循环中调用 SVG.js 不起作用的问题。

腾讯云相关产品中，与SVG.js 相关的推荐产品是腾讯云对象存储（COS）。腾讯云对象存储是一种高可用、高可靠、强安全的云存储服务，适用于存储和处理各种类型的数据，包括图像、音视频、文档等。您可以使用腾讯云对象存储来存储和管理SVG图形文件。了解更多关于腾讯云对象存储的信息，请访问以下链接：

腾讯云对象存储产品介绍：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

在循环中调用SVG.js ()不起作用

我正在使用SVG.js创建几个对象，然后同时为它们设置动画。我似乎不能让它在循环中工作。如果我不使用循环，它工作得很好。请参阅或下面的代码。我相信这与闭包作用域的工作方式有关。

浏览 20提问于2020-03-06得票数 0

1回答

如何正确地将SVG.js 3.0.x版本导入到类型记录创建反应应用程序项目中

、、、、

由于我的问题的主题没有在任何其他线程中得到详细的回答，在官方的Svg.js网站上也没有很好的答案，所以我在一个新的帖子中发布了这个问题的详细说明。1.我的开发堆栈是：b.)打字本-“打字本”："3.6.3“当使用我前面提供的第一个导入时，Intellij突然显示了代码中的类型，但不识别SVG()

浏览 2提问于2019-10-03得票数 2

1回答

如何用svg.js制作Ember组件？

、、

注意:我需要保留对SVG元素的引用，这样我就可以在不重画整个图像的情况下给它们着色，这需要很长时间才能呈现。我认为这禁止我简单地将元素串成缓冲区，但也许不是.

浏览 4提问于2014-01-15得票数 1

回答已采纳

1回答

Javascript: DOM元素和对象之间的区别/“未定义的不是函数”

、、、

我以为我能理解，但是当我在对象上调用某些函数时，比如".addEventListener()“，我得到了著名的”未定义函数不是函数“错误，还有其他一些有趣的事情。因此，这里有两次使用SVG.js的尝试。我基本上只是尝试在SVG画布中生成的每个形状中添加一个事件侦听器，这样当单击任何形状时，它都会改变颜色，而不依赖于所有其他形状。一个给了我“未定义的.”在add事件侦听器行上，我用第二个版本解决了这个问题，但现在我得到了“未定义的.”函数中唯一的声明出错。您能否澄清DOM元素与对象之间的区别，然后帮助我理解为什么<

浏览 3提问于2015-06-30得票数 2

回答已采纳

3回答

用svg.js实现循环动画

、、

我有一个非常简单的svg.js动画，只要页面打开，我就想在循环中运行。在浏览、或页面时，我都找不到任何东西。没有循环的动画的工作版本可以找到。this.animate(1000, '<>', 250).attr({ });} 我知道没有js库很容易做到这一点，但我认为这只是使用svg.js

浏览 6提问于2013-11-14得票数 0

回答已采纳

1回答

将svg缩放到父容器

、、

我正在使用svg.js像画布一样在上面绘制线条。是否可以将通过调用SVG()创建的svg元素缩放到父元素的大小？到目前为止，我只是在元素调整大小时重新绘制所有的线条。offsetHeight: height } = this.whiteboard;我使用的是React，我知道它很难与svg.js

浏览 1提问于2018-03-20得票数 0

1回答

形状之间的位置，所以它平稳地跟随光标，而不是跳跃？

、

如何使白色矩形连续和顺利地跟踪光标的位置，使用移动函数与吐温？var width = 1200var draw = SVG('drawing').size(width, height) var rect1 = draw.rect(30

浏览 0提问于2018-12-07得票数 2

回答已采纳

1回答

不能使用svg.draw.js绘制路径

、、

svg.draw.js是svg.js的扩展，它允许用鼠标绘制元素。draw.polyline().fill('none').stroke({color:'blue'}).draw() 通过在末尾包含我正在为它使用path svg元素，但它对我不起作用。我想要创建类似于的东西，但是这个免费的

浏览 7提问于2017-07-27得票数 2

回答已采纳

1回答

svg.js svg.draggable.js与外观操纵

、、

我通过在jsfiddle中将SVG添加到HTML窗格中来模拟这种情况。set_draggable("ZN_19");set_draggable("ZN_21"); 在可拖放事件处理程序中如果我将它包装成一个组(如ZN_20)并对其调用dr

浏览 0提问于2017-05-16得票数 3

回答已采纳

1回答

动画什么时候发生？

第一次尝试动画在svg.js。非常直截了当，而且很好的独立工作。只需从A到B绘制一条线，从A开始，在A处画一条零长线，将端点动画为B，将起点动画为B。我使用第4 arg (线性宽松'-')来动画()是因为查看了svg.js on CodePen的一个示例--我没有看到它是这样记录的。beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray( )); 试着<e

浏览 7提问于2022-04-08得票数 0

回答已采纳

2回答

如何使用svg.js ()创建自定义的SVG.invent元素？

、、

我只是不明白。解释了如何创建带有圆角的自定义矩形，但我应该如何创建包含文本的矩形，就像下面这样：| || |很明显，我应该创建一个group，然后将一个矩形和文本放入其中，但是当我尝试以不同的方式完成这个操作时，我什么也不会显示。var draw = SVG('container');

浏览 3提问于2017-05-25得票数 0

回答已采纳

1回答

svg.js +角7.3:在生产模式下构建“非构造函数”

、

在开发模式中，该代码完美地工作：import { Component, OnInit } from '@angular/core'; selector: 'app-root', templateUrl: '.().addTo('#canvas

浏览 2提问于2019-03-16得票数 1

回答已采纳

1回答

svg.js /svg-平移-缩放-双击交互

、、、

我正在使用Ariutta的svg-svg zoom和svg.js。我最初的想法是，也许我的文件加载顺序有问题，有时加载顺序会有误。目前正在调查这件事。我的另一个想法是，这可能与svg.js动画库有关，

浏览 3提问于2015-03-22得票数 1

2回答

使用从SVG字体中提取的svg.js +字形手动SVG文本呈现

、、

在研究了HTML5 SVG之后，我似乎能够做到这一点，在与raphael.js和svg.js玩了一圈之后，我决定我更喜欢svg.js。轻量级得多，而且< IE9支持对我来说不是问题。在这方面，我看到两个问题：仅仅使用标准的draw.text()调用来创建<text>元素是不好的，因为这意味着我必须将字体与资产捆绑在一起，由于许可原因，这是不可能的。调用text.bbox()来获取文本元素的边界区域是不准确的。这样，我的最后一个资产将在其中包含基于矢量的字形，这些符

浏览 4提问于2013-08-26得票数 2

回答已采纳

3回答

使用svg.js加载SVG文件

、、、

我使用.load()在DOM中插入了SVG树，使用jQuery成功地加载了SVG文件。但是我想尝试使用来操作元素，但是在文档中我找不到一种方法来使用现有的SVG元素初始化库，我将在该元素中获取对象。我的想法是访问加载的SVG元素(或直接使用svg.js库加载它)，将单个对象复制到另一个元素，然后将它们移动到我需要的位置。该怎么做呢？

浏览 1提问于2013-04-10得票数 11

回答已采纳

2回答

使用svg.js库包装现有SVG元素

、、

如何将现有的<svg>元素封装在svg.js中<svg></svg> 我知道这可以很容易地用svg.js构建，但我以它为例来回答我的问题。

浏览 5提问于2015-01-04得票数 0

回答已采纳

1回答

暂停事件后iOS不执行Javascript (Cordova应用程序)的异步或完整代码

、、、

当暂停事件被触发时，我想执行异步函数。 console.log("puase fire"); //it get print in console console.log("after 1 second"); //it not get print in console. }, false); 超时功能在恢复时得到执行，但如果终止或关闭应用程序，则完成代码执行

浏览 0提问于2018-01-18得票数 1

回答已采纳

1回答

元素的svg.js动画旋转会产生意想不到的结果(可见的“抖动”)

、、、

我正在使用svg.js创建一个自行车骑手的动画。半完整版本在这里：。在使用requestAnimationFrame (而不是动画中内置的svg.js )创建动画的过程中，我遇到了一些移动和旋转svg元素的问题。function toRad(deg) {} <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2

浏览 5提问于2018-02-25得票数 1

回答已采纳

1回答