问题标签 [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 回答
2838 浏览

svg - Snap.load() 本地 SVG 无法加载

我正在使用来自 Github 上 adobe-webplatform Snap.svg / demos / tutorial 的名为tutorial的示例 HTML 文件。

我更改了mascot.svg的位置,使其指向本地文件。但是我的 SVG 文件将无法加载,并且我收到以下错误消息:

XMLHttpRequest 无法加载 file:///C:/Users/cr2320.MC/Documents/Snap.svg-0.1.0/demos/tutorial/mascot.svg。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'null' 不允许访问。

这是我的完整 HTML 代码:

如何让本地 SVG 文件加载?

0 投票
1 回答
11798 浏览

javascript - 使用 Snap SVG 将 SVG 加载到特定的 div

使用SnapSVG将 SVG 文件加载到特定 div 的正确方法是什么?

按照文档,我有这个 JS:

这会在标签上方加载 SVG body,但是如果我尝试设置它的位置,则什么也没有发生,也没有错误。这是我到目前为止所尝试的:

我哪里错了?

0 投票
2 回答
6360 浏览

svg - How do you get the rotation value of an svg object with snap.svg?

So, I'm using snap.svg and I'd like to dynamically rotate an object over time. Something like this:

The problem is I don't know how to access the rotation values for my display objects (or if they even exist!) So given something simple, let's say a circle declared like this:

I know I can access the x and y values like so:

What I need help with is:

  1. Is there a rotation property of some sort that I can use to rotate this object?
  2. If not, how do I rotate an object with snap.svg?
0 投票
1 回答
761 浏览

javascript - 如何在 Snap.svg 中再次单击时重置 svg 坐标

我想创建一个图标,当单击它并再次单击该按钮时,它会变成一个关闭按钮,它会再次变成原始图标。到目前为止,我已经设法完成了代码的第一部分。我知道我可以使用 if else 条件,但我不知道要检查什么。如果您正在寻找 jsfiddle,我很抱歉,因为 snap.svg 还没有 cdn。

0 投票
2 回答
10823 浏览

svg - 使用 Snap.svg 选择多个路径

背景:我正在使用 snap.svg 为内联 svg 中的路径设置动画,并且我试图在一个函数中为多个路径设置动画。

问题:使用下面的代码,我只能在一个抓取功能中选择一个路径。在下面的代码中,我使用了多个选择器,但动画只影响 rect#rect-one。如何在 Snap.svg 中选择多个路径?

谢谢您的帮助!

HTML/内联 SVG

快照

0 投票
3 回答
12866 浏览

animation - 使用 Snap.svg 循环播放动画

背景:我正在使用 Snap.svg 渲染一个圆圈,然后在悬停时为其半径设置动画。我已经用下面的代码处理了那件作品。

问题:一旦悬停,我试图获得一个循环的“脉冲”效果circleRadar,这将涉及在初始r和新r的 70 之间连续动画。虽然文档提到 snap.animate(from, to,... )这里看起来很有希望,我不知道如何在我的代码上下文中实现它。有没有更熟悉 Snap 的人可以提供帮助?谢谢!

代码

0 投票
1 回答
1623 浏览

javascript - Snapsvg 变换线

尝试逐行转换矩阵时出现此错误:

TypeError: Object # has no method 'line'

这是代码笔:http: //codepen.io/anon/pen/BeoyA

当我尝试以不同的形状(例如圆形)进行相同的变换时,它可以工作。行上不支持矩阵变换吗?那么移动线路的正确方法应该是什么?

谢谢!

0 投票
2 回答
21001 浏览

javascript - 如何理解 snap.svg 中的 Transform 属性?

我一直在尝试学习 snap.svg,但我对变换属性有一些疑问。我的问题很愚蠢,但在这里

在下面的示例代码中,这些数字是什么意思?

我猜 s 代表比例,还有 animAfter 和 after 之间的区别是什么?我对 SVG 很陌生。

0 投票
1 回答
550 浏览

javascript - 创建一个不依赖于 Snap 实例的组

这是我想做的:

这是我所做的:

它起作用了,渲染了圆圈,但是我无法移动该组:

<svg>实际上,当我们将和元素嵌入到另一个中时,它看起来像这样。然后就不可能在父元素中移动嵌入的 svg 元素。

我想知道如何在不做的情况下创建组元素snapInstance.group()?然后将其添加到 Snap 实例。

0 投票
1 回答
503 浏览

javascript - Snap.svg:动画上具有相同类型的多个部分

我正在制作一个使用Snap.svg JS 库的小型动画/测试,主要是为了得到这个东西。

这是我的在线实验和代码的链接: http: //codepen.io/nobilelucifero/pen/nmofF

SVG是“压缩的”,无论如何基本结构是

我正在努力实现的是使用相同的功能对我想要移动的身体部位执行几乎相同的动画,而不是全部。

例如,如果我删除与 Ears 相关的代码

身体继续按预期移动。相反,我想移动的两个身体部位一起执行循环的第一部分。我确信我错过了一些甚至是基本的 JS 代码,但感觉有点失落。你们中有人对我有什么建议吗?欢迎任何建议!

提前非常感谢。

编辑:如果我将一个函数推迟 0 值,它就可以工作。为什么?