问题标签 [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 投票
2 回答
2192 浏览

javascript - Snapsvg 动画渐变移动

我有一个渐变箭头:

我想使渐变像波浪或其他东西一样变化/移动。
这是我想要的闪存页面:http ://www.888poker.com/poker-client/euromania_popup.htm?isftd=1&origcid=123456

0 投票
0 回答
860 浏览

svg - 如何使用 snapsvg 测试 2 个 SVG 路径是否在 1 个以上的点相交以及 path1 是否包含 path2

我需要有关测试两条路径是否连续在超过 1 个点处相交的最佳方法的帮助,而不是连续路径 1 包括路径 2 路径 1 = 路径 2。

我还需要解释(http://jsbin.com/pawoduho/5/edit)的结果对象的属性的含义

提前致谢

T. Kia Ntoni

0 投票
2 回答
1940 浏览

javascript - 选择 root of Fragment with Snap.svg

在 Snap.svg 中,我加载了一个外部 SVG 文件,在将其附加到文档后,我必须更改它的一些属性和内容。我想设置作为 Fragment 根元素的元素的xand属性。返回 null 并且下面的代码仍然不起作用。ydd.select("svg")

更新: s是 Paper 实例。

0 投票
2 回答
8941 浏览

javascript - 在悬停时捕捉 SVG 动画 SVG / 在离开时重置 SVG

我正在使用 Snap.svg 创建一些在悬停时动画的 SVG。

一个非常简化的jsfiddle在这里:

http://jsfiddle.net/62UA7/2/

悬停/动画工作正常。

如果用户将鼠标从 SVG 上移开,其目的是停止动画并返回到原始 SVG 状态——这就是我目前卡住的地方。

我使用的实际 SVG 文件很复杂,因此希望有一种快速“刷新”SVG 的方法,而不是手动将其移回原始位置和颜色

我假设有一种非常简单的方法可以做到这一点 - 只是似乎无法解决或在任何地方的任何文档中找到答案。

希望有人可以提供帮助-如果可以,请提前致谢!

0 投票
0 回答
800 浏览

javascript - 如何使用 snap svg 拖动一组元素?

如何使用 snap svg 拖动一组元素?

但是元素集没有任何问题,只有错误:

怎么了?请帮忙。

问题解决了:

但这里有一个新问题。如何在边框中拖动这个组?

0 投票
1 回答
331 浏览

svg - 在 SVG.js 问题中创建 SVG 文档?

我一般是 SVG.js 和 javascript 的新手,我正在查看这里的文档http://documentup.com/wout/svg.js#usage/svg-document并且遇到了一些问题。

所以我假设他们希望我们调用一个函数,所以我从 Three.js 中的一些混乱中收集到的是我需要做的

在正文标签内。然而,这不起作用。当调用 SVG(); 我收到一个错误

如前所述,我还有其他方法可以做到这一点,但似乎最简单的方法是调用一个函数,但我再次不确定我是否正确执行此操作。

我有 Java 的背景,刚从 JMonkeyEngine 的项目中走出来,所以我对编程并不陌生,但对我到底需要做什么感到困惑,因为文档非常模糊,似乎暗示你需要了解他们关于将代码放在何处的术语。

我还发现了一些其他库,如 snap.svg、d3 和 raphael

http://d3js.org/

raphaeljs.com/ snapsvg.io/

我真的只是想创建一堆带边框的图片/彩色框(可互换,因此本质上是一个带有图像的框,然后可以关闭并显示为颜色),即使单击和拖动也可以响应鼠标在桌面和移动浏览器上。基本上不多,但似乎这些都具有相似的功能,只是编码感觉不同。

有什么建议吗?

谢谢大家!

0 投票
1 回答
603 浏览

angularjs - 使用 Snap.svg 进行遮罩在 AngularJS 中有效吗?

我已经尝试过 Snap.svg 网站上的“入门”教程,还尝试复制此处找到的代码http://codepen.io/rachsmith/pen/FzAGt

但我似乎无法让 SVG 掩蔽工作。

其他人有这个问题吗?据我所知,我设置它的方式与在线教程之间的唯一区别是我对 AngularJS 框架的使用。

0 投票
1 回答
1184 浏览

javascript - snap.svg 上同一动画中的多个变换

我有以下代码:

我想在其旋转内对同一个对象执行平移,以便旋转和平移的缓动同步。

我怎么做?

不起作用。

任何想法?

0 投票
0 回答
623 浏览

javascript - Snap SVG 遮罩在 Chrome 34 中无法正常工作

我正在测试 Snap SVG,它是非常好的 SVG 库,但我无法让它在 Chrome 中运行,但它在 Safari、Firefox 和 Opera 中运行正常。你可以在这里看到它。

这是生成 SV 的 JS 文件

您也可以查看 GitHub 存储库:https ://github.com/mupkoo/snap-team

0 投票
1 回答
921 浏览

javascript - SVG textPath 沿路径正确对齐文本

我想沿我的 SVG 路径对齐文本,但是,似乎 SVG 不想将其对齐到行上方并正确旋转所有字母:

沿着我的路径发短信

如何在曲线上方对齐文本,使其可读,而不像上图那样?

我使用Snap.SVG库进行 SVG 操作,我的代码如下所示:

任何建议,甚至是纯 SVG 解决方案,都值得赞赏。