问题标签 [snap.svg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1080 浏览

svg - 如何在 SVG 中顺时针动画饼图 onLoad

我被饼图困住了,它应该在加载时顺时针动画。这是我的饼图小提琴

我需要这个动画来处理 brezier 曲线路径,例如,

我也知道,它可以使用 snap.svg 库来实现,但在这种情况下无法锻炼。

任何帮助表示赞赏。

提前致谢!

0 投票
1 回答
758 浏览

animation - 捕捉 svg 仪表图表动画

我正在尝试锻炼仪表图表的动画。但是,弦的尖端在制作动画时超出了椭圆的圆周。这个小提琴解释了我面临的问题。

预期输出:在制作动画时,尖端应该很好地保持在椭圆内。

在这里,我使用 snap.svg 库为和弦设置动画。

我试图通过它来实现这个动画的代码是:

任何帮助表示赞赏。

提前致谢!!!

0 投票
2 回答
20894 浏览

javascript - 如何使用 snap.svg 为路径变形设置动画

我一直在寻找一个关于如何为 svg 路径变形设置动画的好例子。我知道如何使用 SMIL 完成相当复杂的操作,但是 snap.svg 是新的和闪亮的,而且似乎每个人都喜欢它,所以我想看看。我在任何地方都找不到关于如何在任何地方进行动画路径变形的好例子。希望 snap.svg 大师可以为我指明正确的方向?

这是 svg 图像的链接及其代码:

图片链接

0 投票
1 回答
486 浏览

svg - 如何在 snap svg 中使用英寸?

我刚刚开始玩 snap 并且一直在尝试以英寸而不是像素为单位工作,这可能吗?如果是这样,我该如何使用英寸?似乎有些功能接受英寸而有些不接受?

0 投票
1 回答
267 浏览

rotation - 如何在不裁剪的情况下旋转矩形

我创建了一个 1.5 英寸 x 1.5 英寸的矩形,并在外面添加了一个边框,当我将它旋转 45 度时,角会被裁剪,如下所示。我如何旋转这样的东西而不被裁剪?

旋转前

旋转后

我测试了使用 Snap 和 css 旋转这个 SVG 形状。我在两者之间得到了非常不同的结果。使用我正在构建的应用程序,形状可以从 0-359 度旋转。这是它们在 2 之间的形状。使用 Snap 旋转的形状看起来不错,但是当放入 div 并使用 CSS 旋转时,它看起来真的很糟糕。所以我想我需要找出更大的 SVG 区域并将形状放在该区域的中心,唯一的问题是我有大约 80 个不同形状和大小的块。

使用 Snap 旋转的 SVG 形状 使用 CSS 旋转的 SVG 形状

0 投票
1 回答
3262 浏览

javascript - Snap.SVG 如何停止所有动画

我想找到一种在单击某个元素时停止 SVG 中所有矩形元素上的所有动画的方法。我正在尝试使用这样的东西:

但我不能让它工作

0 投票
1 回答
6226 浏览

svg - SVG 基础:移动线的端点

我想在 SVG 中创建一条固定在一点的直线。当用户单击并拖动另一个端点时,该端点会跟随他们的光标。我正在使用snap.svg这个。

我这样做的想法是首先画一条线:

然后创建一个我跟踪拖动事件的控制圈。在拖动回调中,我将使用传递的and参数更新行的x2andy2属性。dxdy

我注意到的第一件事是简单地设置导致事情爆炸的属性。我不完全确定我理解为什么会这样,但似乎我的回调在有机会运行之前被反复调用。然后,当它“赶上”自己时,它会以某种方式过冲。我不太确定。

无论如何,通过谷歌搜索,我能够确定在控制圈上使用 transform 属性可以让我模拟默认drag方法:

在这一点上,我被困住了。我不能对行的and属性使用相同的transform技巧。如果我直接设置它们,我会遇到过冲问题。x2y2

SVG 专业人士——对如何做到这一点有任何想法吗?

0 投票
1 回答
2319 浏览

javascript - 如何使用 Snap.svg 为路径创建图像模式?

无法通过Snap.svg库为路径元素创建图像模式。可能吗?

创建一个Paper.image()然后尝试调用Element.pattern()它似乎不是一个选项或一个可行的解决方案。

所以我想知道是否可以使用 Snap.svg lib 来做到这一点。还是我应该自己生成所需的元素,然后将它们“手动”附加到所需的 svg 中?

提前致谢!

0 投票
1 回答
410 浏览

angularjs - 在 Angular 指令中替换后观看 svg 元素

最近一直在尝试构建一种用于插入内联 svg 的防弹指令。它工作得很好,但最近我想添加一些当类“动画”添加到插入元素时触发的动画。问题是$watch适用于旧元素(之前的那个replaceWith)。

我一直在尝试任何事情,但我无法让它发挥作用。替换后如何访问元素?

这是我的代码:

0 投票
2 回答
928 浏览

javascript - 如何在 Snap.svg 中获取 SVG 根元素?

在 Raphael 中很容易获得 SVG 根元素:

但是如何在 Snap.svg 中做到这一点?以下不起作用: