首页 > TAG信息列表 > snap-svg

javascript-使用Snap.svg在z空间中移动SVG组

我正在使用Snap.svg使SVG的元素互动. 如何在其他所有形状的“前端”中移动一个Element.group形状组？悬停时将执行此操作. 一个简单的JSFiddle示例： http://jsfiddle.net/offmilk/b0av7jx6/ 当它们悬停在上方时,我试图使后面的两个圆圈位于前面. 我知道Raphaël以Element.toFront()的

javascript-Snap.svg从点差的斜率获取旋转

我正在制作一个动画,在该动画中,我需要使该平面遵循给定的路径,并且看起来像是在“环绕”地球. Here is the codePen,如您所见,这非常简单. 我的问题是角度,我试图通过计算两个点的斜率并将其转换为度数来查看在平面通过路径时应旋转多少角度. 即使我添加了一个epsilon来安全检查各

javascript-在svg组上模拟点击事件

我使用Snap.svg创建了一个组. shape = paper.rect(225, 50, 100, 50, 10, 10); text = paper.text(253,82, "text") myGroup = paper.g(shape, text); myGroup.click(toggleSelection); 当我实际上用鼠标单击该组时,将执行toggleSelection函数.我无法弄清楚如何模拟点击.我已经尝

javascript – SVG vs CANVAS(Snap.svg vs FabricJS)

我做了一个速度来比较Snap.svg(SVG)和FabricJS(CANVAS)： http://jsbin.com/tadec/7函数dummy(). 在Chrome中SVG渲染时间为120毫秒,而CANVAS渲染时间为1100毫秒. SVG比CANVAS快9倍. Fabricjs.com页面在this example中说Raphael需要225毫秒而Fabric需要97毫秒(解析：80,渲染：17). 我有一

javascript – 在snapSVG中获取SVG容器大小？

使用SnapSVG获取’paper’对象大小的正确方法是什么？ 我的HTML看起来如下： <div id="myContainer" style="width: 900px; height: 100px" /> 然后是Javascript代码： function initViewer(elementId) { var element, elementRef, snap; elementRef = '#' + el

javascript – 如何使用Snap.svg在Karma中编写与SVG图形交互的单元测试？

我正在开发一个Web应用程序,它使用SVG图形进行大部分显示和交互.我想使用Karma创建加载SVG资产的单元测试,确保存在某些组/路径等. 我还没有找到任何直截了当的答案,如何做到这一点,或者我自己想出来的.我试图让这样一个简单的测试通过(使用mocha& chai)： describe("SimpleDecalRou

javascript – Snap.svg确定沿路径的拖动距离

由于引用了here并更新为与Snap.svg here一起使用,我想更好地理解提供的gradSearch函数实际上是如何工作的(这有点过头了),以及这种方法是否有任何好的替代方案？ gradSearch = function (l0, pt) { l0 = l0 + totLen; var l1 = l0, dist0 = dist(path.getPointAtLen

javascript – 将浏览器单击事件`x`和`y`坐标转换为缩放的Snap svg元素上的坐标

我需要在用户点击的位置向snap渲染的svg添加一段文本. 因为SVG使用100％宽度缩放并使用viewBox属性,所以我需要将浏览器的click事件提供的x和y坐标转换为缩放svg上的x和y坐标. 我设法通过使用这段代码来完成这项工作： var $canvas = $('svg#myscaledsvg'); var snap = new Snap($canv

javascript – 如何在AngularJS中建模Snap.svg地图？

我在线制作棋盘游戏的网络界面.我想用Snap.load加载Snap.svg地图,即异步. 加载后,我想将一个监视添加到作用域的属性,并根据属性(这是一个对象)向地图添加一些颜色.我的代码基本上是这样的： .controller('GameCtrl', [ '$scope' '$routeParams' 'GameService' ( $scope

javascript – Snap.svg – 停止hover事件重新触发可暂停元素的子元素

对于一个项目,我使用SVG形状,包括背景多边形和一些文本(我已经转换为路径)在我的背景poly之上.我正在使用Snap.svg来动画我的形状.当我将鼠标悬停在我的多边形上时,该形状应该缩放到特定大小,包括其中的所有内容.在mouseout上,形状缩放回原始大小. 在这里您可以找到一个简化的示例：h