snap.svg | 易学教程

how to fix the position of mask in snapsvg.js?

阅读更多关于 how to fix the position of mask in snapsvg.js?

问题 Here is js code: var cv = Snap('#cv').attr({height: '100%', width: '100%'}); var mskHide = cv.rect().attr({height: '100%', width: '100%', left:0, top:0, fill: '#666'}); var mskShow = cv.circle(200, 200, 150).attr({fill: '#fff'}); var mskG = cv.group(mskHide, mskShow); var bg = cv.circle(200, 200, 150).attr({fill: '#aaa'}); var customImg = cv.image('http://placehold.it/500/990000').attr({mask: mskG}); //when I drag the customImg， I want mskG fixed position customImg.drag(); You can preview

On click svg image path get path id?

阅读更多关于 On click svg image path get path id?

问题 I tried to get an id of svg image path ,but it's not working ,on DOM ready i have tried it on document ready also i have tried.How can i get it done.I have used svg image (NewTux.svg) from this url http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg <!DOCTYPE html> <html> <head> </head> <body> <div id="main_wrapper"> <object type="image/svg+xml" data="NewTux.svg">Your browser does not support SVG</object> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery

How to auto text wrap text in snap svg?

阅读更多关于 How to auto text wrap text in snap svg?

问题 Using the following plugin and code you could wrap text where there is \n : Snap.plugin(function (Snap, Element, Paper, glob) { Paper.prototype.multitext = function (x, y, txt) { txt = txt.split("\n"); var t = this.text(x, y, txt); t.selectAll("tspan:nth-child(n+2)").attr({ dy: "1.2em", x: x }); return t; }; }); // And you can use it like this: var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({ font: "18px Arial", textAnchor: "middle" }); And it produces: http://jsbin.com

Prevent triggering of parent group (group events bubble up)

阅读更多关于 Prevent triggering of parent group (group events bubble up)

问题 If you add an eventhandler to a group (not an element like rectangle) and this group also contains a group with an eventhandler and you trigger an event on the child group (click), it will also trigger the parents eventhandler. Fiddle How can you prevent that the parent is triggered? If you add the handlers to the rectangles, the event doesn't bubble up. var svgElement=document.getElementById("mainSvgId"); var s = Snap(svgElement); s.attr({height: 300, width: 300}); var parentGroup=s.g().attr

SVG - moving a dot along a fixed circle following the mouse position

阅读更多关于 SVG - moving a dot along a fixed circle following the mouse position

问题 I'm trying to animate a point to follow the potion of the mouse. It's like an eye looking at the arrow while I'm not on the eye. The point should move along a circle if I mouve around the mouse. If the mouse is on the eye, the eye should follow the arrow. That's what I'm currently trying to do. I use snap.svg library. I currently have a point following the mobility of the mouse but I cant make it stay in a circle. It looks like this so far : var s = Snap(400,400); var c1 = s.circle(0,0,10)

Invert mask with svg.js

阅读更多关于 Invert mask with svg.js

问题 I'm starting to use svg.js on a project, and as I was playing with masks, I couldn't manage to invert them. I drew a rectangle, and a circle, using the circle as a mask for the rectangle, only showing the part of the rectangle that's inside the mask. var leftRect = draw.rect(300, 200); var maskTest = draw.circle(100); leftRect.attr({ x: 100, y: 100, fill: '#FF64F9' }); maskTest.transform({ x: 150, y: 150 }); leftRect.clipWith(maskTest); Now I want the opposite, I want to mask to display

SVG pattern animation

阅读更多关于 SVG pattern animation

问题 I have defined a pattern in svg. I want to rotate it continuously.... I'm not able to apply animation on that pattern definition. i applied same animation to a symbol , it works but its not working on pattern... <pattern id="GPattern" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(35)" > <circle id="mycircle" cx="10" cy="10" r="10" style="stroke: none; fill: red" > </circle> </pattern> this is pattern def. Please help me how i can apply certain

Raphael transform animation not behaving

阅读更多关于 Raphael transform animation not behaving

问题 I'm doing an animated transform in Raphael (and Snap.svg, which does the same). If I apply a rotation to a basic element, it rotates normally as I would expect. However, if I already have a previous transform applied (even if its t0,0 or r0), the element seems to scale down and back up, as though it always has to fit in its previous bounding box or something. Here is an example fiddle var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });

Snap.svg - Stop hover event retriggering on a sub-element of the hoverable Element

阅读更多关于 Snap.svg - Stop hover event retriggering on a sub-element of the hoverable Element

问题 For a project, I'm using SVG shapes that consist of a background polygon and some text (which i have converted to paths) above my background poly. I am using Snap.svg to animate my shapes. When I hover over my poly, the shape is supposed to scale to a specific size, including everything inside it. On mouseout, the shape scales back to its original size. Here you can find a simplified example: http://jsfiddle.net/XwwwU/11/ I have implemented it like so: SVG/HTML <svg> <g class="el"> <polygon

Animate dotted path, one dot after another

阅读更多关于 Animate dotted path, one dot after another

问题 I'm using the latest version of Snap.svg to draw and animate a path within a SVG: var s = Snap('#svg'); var getPath = s.path('M15 15L115 115'); var pathLength = getPath.getTotalLength(); getPath.attr({ stroke: '#000', strokeWidth: 5, strokeDasharray: pathLength + ' ' + pathLength, strokeDashoffset: pathLength, strokeLinecap: 'round' }).animate({ strokeDashoffset: 0 }, 1500); While this is working fine (as you can see here), I want to make it a dotted line, animated one dot after another. I've