snap.svg

问题 I'm trying to load a SVG using Snap.svg and adding it to several SVG elements on a page. I can make it work only loading one instance, but it fails when I add it to multiple elements. s1 = Snap('#step1'); s2 = Snap('#step2'); s3 = Snap('#step3'); Snap.load('img/steps.svg', function (l) { s1.append(l); s2.append(l); s3.append(l); }); Here is a jsfiddle http://jsfiddle.net/denoise/6s7L119a/ 回答1: Snap.load('https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg', function (l) { var

问题 this demo . I want to make Icons using Snap.svg, so i want end user to repeating HTML to getting multiple icons. HTML: <svg class="box"></svg> <svg class="box"></svg> <!-- not work --> <svg class="box"></svg> <!-- not work --> <svg class="box"></svg> <!-- not work --> JS: var box = Snap(".box"); box.rect(0,0,100,100).attr({fill:f00}); 回答1: You need to iterate through each .box and instantiate Snap on each element, this is an example: var boxes = [].slice.call(document.querySelectorAll(".box")

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 3 years ago . What is a right way to work with SVG if I have full scene in SVG file? Split scene to many files (e.g. characters, cars, birds, clouds, etc) and then load them up to different elements for each one. Load whole scene to one element and then animate groups inside scene? 回答1: It

问题 I have this code : el.replace(/[0-9]*\.[0-9]*/g, function(x){ return (+x).toFixed(2) }) }; It works great on an individual svg path to trim its decimal places. Now I want to be able to trim all the paths from a paper(svg).To do that I am trying to make a snap svg plugin here: Snap.plugin(function(Snap, Element, Paper, glob){ Paper.prototype.trimPthDec = function(){ this.paper.selectAll('path').forEach( function(el) { el.trim() } ) ; function trim(){ el.replace(/[0-9]*\.[0-9]*/g, function(x){

问题 Hello the answer to this question with this fiddle is perfect for what I need to do - drag something along a path. However they used Rapael - I'd like to update things and use snap.svg instead. Replacing the reference from Raphael to Snap in this answer doesn't work - does anyone have any ideas why? This is as far as I've got in this codepen - I want to have a 10 point shape - the outer points of which can move a long a path to the centre. var s = Snap("#svg"); var paths = [], points = [],

问题 I have an SVG image that is of size 200px x 300px but based on some conditions, I need to draw small circles that have a radius value of 30 whenever a condition fails and want this to be layered evenly (no overlapping), over a specified region of my image. There could be multiple circles drawn but obviously don't want these to go off the image but instead wrapped around to the next line down when 5 circles have already been drawn on the first row of the image. The same would then apply on row

问题 Using snapsvg.io, I would like to know if it's possible to add a clickable link such as a <a href="somelink.com"/>My Link</a> tag to an SVG text, circle or line. An example here I have is text: var s = Snap("#svg"); var text = s.text(x + 10, y - 5, 'My Text'); text.attr({ fill: doesExist ? alert : textColorOK, fontSize: '10px', 'font-weight': '600', 'font-family': 'Arial Narrow, sans-serif', 'text-anchor': 'start', cursor: doesExist ? 'pointer' : 'default' }); I'd like to do this with snapsvg

问题 Codepen: http://codepen.io/anon/pen/dfIBv I have two rectangles in g element on which I apply transform. GetBBox method shows same numbers after and before transform. If I apply same transform directly on those rectangles, getBBox method shows correct measurements. Is there any way how to get "correct" measurements of these rectangles after applying transform to parent group element? Thanks! 回答1: Ian is correct. element.node.getBoundingClientRect() shows correct measurements. Thank you :) 来源：

问题 I'm trying to center the <path> animation horizontally and vertically (after having scaled it down with transform="scale(0.5)) while keeping the <svg> at 100% width and height of its container. I'm using Snap.svg. As you can see below, the <svg> is fine but the <path> is all crammed up in the upper left corner. var s = Snap("#me"); var myPath = s.select("#mypath"); function reset( el ) { el.stop(); el.attr({ "stroke-dashoffset": 125 }); }; function startAnim( el ) { el.animate( { "stroke

问题 If I apply a translation of (100, 0) to an SVG path, it shifts left by 100px. But if I first rotate the path, then the translation happens along a diagonal. I understand why this happens -- the rotation has rotated the axes, thus making the translation along the x axis no longer horizontal. There are times, however, when this isn't desirable, when I'd like to apply a transformation to the result of a previous one rather than having it be affected by or affect those previous ones as well. I