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

snap.svg - snap.svg 中的复合路径

如何在 snap.svg 中创建复合路径?一个简单的例子是两个同心圆,它们创建一个“甜甜圈”形状。有没有一种将这两个圆圈组合成复合路径的好方法?

0 投票
1 回答
3581 浏览

snap.svg - 在 snap.svg 中创建具有 id 属性的组元素


如何在 snap.svg 中创建具有 id 属性的组元素?

我试图这样创建它:

或者

但它不起作用。生成的 svg 代码没有 id 属性。

0 投票
1 回答
1382 浏览

javascript - 在 Snap.svg 中操作路径或重绘它?

对于像这样的元球动画:http: //paperjs.org/examples/meta-balls/我正在 snap.svg 中创建一条连接两个圆圈的路径。它看起来像这样:

  1. 什么会更好:在每一帧上重绘路径或操纵它?
  2. 如何操纵路径?(即移动点和控制点)

如果超过两个圆圈,我想重绘将是要走的路。

0 投票
2 回答
27676 浏览

javascript - 如何调整大 svg 的大小以适合 div

我有以下 div 里面<body>

我想在这个 div 中放置一个 640X480 的 svg。我试过这个:

但是 svg 从正确的大小被切断。

0 投票
0 回答
1530 浏览

javascript - 为动画添加延迟

我正在使用 snap svg 加载一些 svg 图标,其中一些在动画中有 2/3 停止。有没有像在 Raphäel 中那样使用 Snap 添加延迟(动画对象有延迟方法)。

我想知道如何为动画添加停止/延迟。动画在这里

0 投票
1 回答
653 浏览

javascript - snap.load() 无法正确加载多个 svg

究竟如何Snap.load()在内部加载 svg。如果在 svgs 数组上迭代运行,则脚本显示绑定的数组索引。如果递归运行,图像的顺序就会混乱。虽然一个一个加载工作正常。这是我尝试过的:http: //jsfiddle.net/nahid/C3q2r/

ps:注释掉必要的部分以查看行为。

0 投票
3 回答
1598 浏览

java - 在饼图中添加onclick函数

我需要在我的项目中添加一个图表,我尝试了一个免费图表(链接如下)我需要向该饼图添加一个 onclick 处理程序。我认为需要在里面添加onclick函数

snap.svg.js

(在路径标签中)我尝试了很多但没有得到

http://www.jqueryscript.net/demo/Responsive-Pie-Chart-Plugin-wit-jQuery-Snap-SVG-Pizza

0 投票
1 回答
1948 浏览

javascript - 使用变换矩阵的 SVG 动画

我是第一次使用 SVG 动画,我正在使用一个名为 SnapSVG 的库,它对我有很大帮助,但是我想更好地理解“变换:矩阵”无法将对象操作到我想要的选项,有没有什么工具可以可以帮我这个过程吗?

Javascript:

jsfiddle

0 投票
1 回答
7773 浏览

javascript - 获取 snap.svg 中被点击元素的 ID

在snap.svg http://snapsvgid的事件处理函数(例如单击回调函数)中获取属性(或基本上任何帮助我识别事件发生的元素的属性)的最佳(跨浏览器)方法是什么.io/

这是一些代码。我尝试过的似乎适用于最新的 Chrome 和 FF,但我想知道是否有更好的方法。

0 投票
2 回答
142 浏览

javascript - SVG 是如何在 HTML 中绘制的

再会,

当我注意到这种行为时,我正在玩 SVG。

背景:我正在使用 snap.svg 加载 SVG。我要替换的节点位于组 <g> 节点内。

我使用 document.getElementById 选择了一个 SVG 节点。然后我得到了父母。然后我用另一组 SVG 文本替换了父级的 textContent 属性。但是,新的 SVG 不可见。

我在谷歌浏览器中打开了开发者工具。我在节点树视图中选择了相同的节点。我将节点编辑为 HTML,用新的 SVG 文本替换所有 SVG 节点。但是,新的 SVG 不可见。

最后,我选择了根元素,即 SVG 标签本身。然后将 SVG 标记编辑为 HTML,将 SVG 文本附加为最后一个子元素。现在新的 SVG 可见了吗?

是否有我应该注意的 SVG 绘图规则?我在其他问题中读到,很难/不可能用 node.innerHTML 替换 HTML 的保存方式来替换 SVG 文本。