snap.svg

问题 What is the correct way to get the size of the 'paper' object with SnapSVG, as soon as it has been created? My HTML looks something as follows: <div id="myContainer" style="width: 900px; height: 100px" /> And then the Javascript code: function initViewer(elementId) { var element, elementRef, snap; elementRef = '#' + elementId; element = $(elementRef); element.append('<svg style="width: ' + element.width() + 'px; height: ' + element.height() + 'px; border: solid 1px black;"/>'); snap = Snap

问题 I have an Angular 4 app using Snap SVG and I get the dredded webpack problem "Cannot read property 'on' of undefined". Using snapsvg-cjs seems to be the simplest way to fix this but then I lose all the nice typescript typings (answered here: Typescript library for SVG). There is some talk of using import-loader but then I would need a web pack config and angular cli takes that away. Plus : import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; doesn't

问题 I am trying to create a code to animate my header as the user scrolls. I have managed to create the animations I want using 2 different plugins: snap.svg and scrollmagic. I'm new to both of these so please excuse my noobiness. Here it is on CodePen: http://codepen.io/anon/pen/dYbPXe /* Animation 1 */ var speed = 250, easing = mina.easeinout; [].slice.call ( document.querySelectorAll( '.header > a' ) ).forEach( function( el ) { var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path'

问题 I am using Snap.svg library and doing some drag & drop. My question is how do i get id of element that i am dragging over. I am trying to implement drag and drop and only selected areas are valid drop targets. I do not know how to check upon dragend what element is underneath my drag. This is from documentation: Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]) When element is dragged over another element drag.over.id fires as well How do i listen for drag.over.id? My

问题 I'm able to load a few SVGs and append them (the nodes) to a DOM element using: container.appendChild( fragment.node.cloneNode(true) ); Now if I want to do the same, but by loading only one SVG file and extracting nodes from it, like: let myElement = fragment.select( '#elementID' ); container.appendChild( myElement.node.cloneNode(true) ); ...that doesn't work, and I assume it's because myElement is an element and not a fragment. myElement.node shows a tag that isn't wrapped by an SVG element.

问题 Knowing that Snap.load(); is asynchronous, I'm looking for a way to append the loaded files in the requested order. This is the code I'm using: s = Snap(800, 800); function loadSvg(url) { Snap.load(url, appendSvg); }; function appendSvg(svg) { g = svg.select("g"); s.append(g); }; loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg'); loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg'); I found this (http://svg.dabbles.info/snaptut-loadmulti.html), but I wonder if

问题 I have a polyline(1) that is withing group that is within another group. Both of these groups are transformed in every way. I need to get the exact locations of the polyline points after the transformations but it isn't easy since there is only transform attribute at hand. I'm trying to replicate these transformations to another polyline(2) so I would get the transformed point locations. I get the globalMatrix from the polyline(1) and with the help of this: http://svg.dabbles.info/snaptut

问题 I'm trying to run Snap.svg locally, but the Snap.load() function makes an AJAX request, which isn't allowed locally (in Chrome, anyways). Below is my code: window.onload = function () { var s = Snap("#headDiv"); Snap.load("emotions.svg", function(f) { eyes = f.select("#eyes"); lids = f.select("#lids"); head = f.select("#head"); s.append(f); }); }; So while this works fine from a server, I'd like to get this to run locally. What would be my best option to include my emotions.svg file without

问题 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

问题 I am new to snap.svg and I have been able to make my circle and make it draggable but I can drag it out of the area I gave my svg and then it is lost on the page. How can I bound it so that it can not go out of the area I gave for my svg? Here is my basic code: <body> <svg id="svg" style="width:700px; height:600px;"></svg> </body> <script> var s = Snap('#svg') var circle = s.circle(150, 150, 100) circle.drag(); </script> Thanks for your help! 回答1: Just in case someone stumbles upon this one,