问题标签 [snap.svg]

这个问题很简单，但我自己解决不了。如何获取子元素的全局坐标？在我的情况下，我有一个组和几个嵌套组。然后我需要获取一些我已经移动和旋转过的东西的内部元素的坐标。我试图获取感兴趣对象的本地位置，然后应用全局变换，但结果与我预期的不一样。

编辑
这是我所拥有的和需要的东西的一个小演示。我们有几个嵌套组，我们对其应用了一些转换。然后我需要说CIRCLE#target' 中心相对于 SVG 的坐标。如您所见，它将类似于 77x131。

使用 Snap.svg，我想使可拖动组中的某些元素也可以单独拖动 - 但是当拖动这些子可拖动元素时，不应将父组作为一个整体拖动。换句话说，我需要从组的拖动句柄中排除组的某些子元素。

在下面的示例中，组设置有一个可拖动的 Rectangle 元素和一个 Circle 元素。Rectangle 是可拖动的子元素，Circle 是不可拖动的子元素。父组本身是可拖动的，因此使圆圈成为拖动整个组的手柄。我想让它这样可拖动的矩形不能用于拖动整个组，但同时保持组的成员，以便在使用圆圈拖动组时包含它。

当您使用矩形移动所有内容时，您可以看到被拖动的矩形和被拖动的组的奇怪行为。

如何将矩形排除在用于拖动其父组的同时允许单独拖动它？

jsfiddle 示例：http: //jsfiddle.net/EDT9J/

HTML 代码：

Javascript/ Snap.svg 代码：

如何 访问和枚举控制点及其在svg/snapsvg路径中​​的坐标？

就像是：

我正在使用 Snap.svg 制作动画。我目前有两个元素（一个圆和一个椭圆）要绘制。元素将一起平移，椭圆也会旋转和改变形状。我可以使用Element.animate()Snap.svg 中的函数为每个元素设置动画，但要让它们和谐地变换是非常棘手的。那么如何将元素作为一个整体进行动画处理呢？html 片段放在https://gist.github.com/dongli/8124267上。

PS：每个动画帧后的属性和属性不会更新cx。我希望他们会改变。cycentroid

谢谢你的帮助！

我开始使用 snap.svg，并陷入了一个可能很简单的问题。我画了一个圆圈，想让用户拖动它，当用户停止拖动时，我想知道圆圈的最终位置。

我从这个开始：

然后我创建了以下函数作为拖动事件处理程序；我只需要拖动结束事件，所以我将另外两个事件处理程序设为空：

然后我安装了拖动事件处理程序：

d.drag(moveFnc,startFnc,endFnc);

每当我尝试拖动一个圆圈时，都会触发结束事件，但是圆圈没有移动。

所以我想也许我还必须创建拖动移动事件（尽管我不需要它）：

现在圆圈确实移动了，但并不完全在鼠标处，而是在其右下角大约 20 个像素处。

我在这里阅读了文档：http: //snapsvg.io/docs ，似乎没有关于如何创建工作拖动事件的解释。

怎么会有人知道这些知识？！

大家好我想弄清楚如何使用Snap SVG编写动画。

我知道有很多方法可以实现我正在寻找的东西，这实际上只是一个简单的动画，但不确定我做错了什么。

所以我有几个 SVG 文件，我想在点击事件上制作动画，但我已经尝试了几次，但没有任何动画效果。

目前这就是我所拥有的：

图像加载并似乎可以工作，但我无法让它们正确设置动画。最终，我希望在用户单击 var p 时为 var B 和 var L 组设置动画。

如果有人熟悉 snap svg 或 raphael js 并且知道如何使用它们制作动画，也许你可以帮助我？任何帮助深表感谢。

我是 svg 和 js 的新手。我有一些使用压敏笔绘制的 svg 文件，它们的路径里面有填充，并且有重复的路径（包含填充）。在 Illustrator 中，您可以选择整个路径，然后将笔更改为基本笔（无压力感应），这会将路径更改为简单路径（每行没有重复路径的路径）。下面的 svg 示例显示每条线有 2 条并行路径：

http://jsfiddle.net/Y35sV/10/

https://dl.dropboxusercontent.com/u/140225334/face.svg

我正在考虑使用 snap svg 更改每个路径的 d 属性。请注意，小路径已被手动剪切为单个路径。

如何以与 Illustrator 相同的方式删除每行的第二条路径，但请以编程方式使用 js？

任何想法将不胜感激。

****更新：

我做了一些研究并解决了这个问题，这是我的发现：

1-我需要将所有子路径转换为路径，并将所有路径转换为绝对值。（这部分已经由 Ian 完成）

这里：http: //jsbin.com/fiwofukitegu/2/edit

2-然后我应该计算每个路径段的 C 数量，并有一个检查功能来检查 C 命令的数量是偶数还是奇数，

像这样的东西：

3-我实际上手动检查了这个：

如果每个路径段中 C 的数量是偶数，例如 2 ,4, 6,8,10,... 我应该先计算它们，然后从 2、3、4、5、6 C 及其以下位数。

4-如果每个路径段中C的数量是奇数

像 1, 3,5,7,9,...我应该先计算它们，然后从 1,2,3,4,5 C 及其后面的数字中删除。

那么结果将是一个只有一行的路径段，而不是重复的行。

我非常感谢任何是 js 专家并愿意帮助完成这项工作的人！

我有一些具有复杂/复合路径的 svg 文件。这些在 Inkscape 或 Illustrator 中用压敏笔绘制的路径在路径之间有微小的填充。在 Illustrator 中，您可以选择整个路径，然后将笔更改为基本笔（无压力感应），这会将路径更改为简单路径。如何使用 js 实现这一点？

我在这里有两种路径的 2 个示例：

如何从这个具有填充的复杂路径的 svg 更改为具有使用 js 没有填充的简单路径的上述 svg？

编辑：嗨@罗伯特。我有这样的：

并在 jsbin 中：jsbin.com/sovit/1/edit

我卡在这里，你能纠正这个吗？

编辑：谢谢@robert。我只是这样纠正它：

现在的问题是，重复的路径仍然存在：（这个带有使用上述代码生成的 svg 代码的 jsfiddle 示例显示每行似乎有 2 个路径）

http://jsfiddle.net/Y35sV/2/

请问可以删除每行的第二条路径吗？

I have loaded my svg image, but now I want to make it invisible. And I can't find a way to do it ...

So now I need to know which attribute of svgImage I have to change the visibility of the image to false.

有没有办法使用 SnapSVG 使用文本路径？我尝试使用 textPath 作为属性，但它似乎没有在文本节点中添加 textpath 元素。

我没有看到使用 snap.svg 在 SVG 中操作文本路径的直接 API。