Stack Overflow
Stack Overflow

Questions tagged [svg.js]

svg.js is a lightweight library for manipulating and animating SVG. Svg.js has no dependencies and aims to be as small as possible and is licensed under the terms of MIT License.

svg.js is a lightweight library for manipulating and animating SVG. Svg.js has no dependencies and aims to be as small as possible and is licensed under the terms of MIT License.

Hello World Example

<div id="drawing"></div>
<script>
    var draw = SVG('drawing').size(300, 300)
    var rect = draw.rect(100, 100).attr({ fill: '#f06' })
</script>
396 questions
0
votes
2 answers

Loop in the svg.js

rect .animate(1000,"<>",0).dmove(50,0) .animate(1000,"<>",0).dmove(-10,0) .animate(1000,"<>",0).dmove(20,0) .animate(1000,"<>",0).dmove(-60,0).loop(true, true); Why (and should it?) does the loop not repeat the entire animation? He…
Андреслав Козлов
  • 33
  • 8
0
votes
1 answer

svgjs with existing svg tag

I'm trying to init svg.js with existing svg tag, var svg = SVG.get('mysvg');var draw = svg.doc(); draw.polyline().... but I get this error: the doc is undefined for svg. how could I get the doc so that I could draw line?
Jason
  • 1
0
votes
1 answer

manipulate svg outside the DOM, before ignite it

So i'm working on a svg manipulation, and i'm looking at svg.js. My question is: can i manipulate the svg in background, before import it into the DOM? I don't need the initial image, just a manipulation i do from it. Bests
piLeoni
  • 131
  • 13
0
votes
1 answer

SVG.js group is returning exponential value although I'm storing it as a string in group

Storing numeric value as String in group(some attribute) using SVG.js. How to get value as string instead of numeric exponential value.Although I'm converting value to String before adding to group. While re-fetching, group is giving exponential.…
MLK
  • 11
  • 3
0
votes
1 answer

Can't access children when adopting an element with SVG.js

I'm trying to let the user manipulate an avatar, with svg.js in Ionic 3, by replacing parts of the avatar (i.e. g tags representing the face, arms, etc.). I load the avatar svg as an object, select the svg tag and 'adopt' it with svg.js as in the…
sjk
  • 1
  • 1
0
votes
1 answer

Are there any events associated with resize in svg.resize.js?

I am using svg.resize.js, svg.select.js for selecting and resizing svg elements. Once the resize is done, I want to perform some actions on another element. Are there any events associated with resize in svg.resize.js like dragstart is associated…
Priyam
  • 11
  • 3
0
votes
0 answers

Q: svg.js panzoom to fit window

I'm having issues when exporting my SVG to PNG using svg.js and saveSvgAsPng. The issue seems to be that saveSvgAsPng saves whatever portion of the SVG content that is shown to the user instead of the entire SVG file. So; my question is how do I…
user1412405
  • 1
  • 1
0
votes
1 answer

Using SVG.select() method with class selector of the svg.js library doesn't work with typescript

I'm testing svg.js library with typescript and having some problems with usage of CSS selectors. I would like to select SVG element using select() method with class selector. In the presented fiddle it works perfectly with javascript: var circleTwo…
mpro
  • 14,302
  • 5
  • 28
  • 43
0
votes
1 answer

scaling svg to parent container

I am using svg.js to draw lines on like a canvas. Is it possible to scale the svg element created by calling SVG() to the size of the parent? As of right now, I am just redrawing all the lines when the element resizes.
…
sdfsdf
  • 5,052
  • 9
  • 42
  • 75
0
votes
1 answer

how to add custom events to svg.js

I'm testing svg.js library, and have found problems declaring custom events. Here is the fiddle. Clicking on the first circle should change the color and it works: circleOne.click(function() { this.fill({ color: '#f06' }) }) Clicking the second…
mpro
  • 14,302
  • 5
  • 28
  • 43
0
votes
1 answer

svg.js not working with Typescript and Stencil.js

I have a basic Stencil app built with Typescript. I'm not using Angular. I'm unable to use svg.js. Here is my full Component: import { Component, State } from '@stencil/core'; import * as moment from 'moment'; import * as SVG from…
leetheguy
  • 872
  • 10
  • 29
0
votes
1 answer

SVG.js: large bounds SVG's don't show up?

I have this code which works perfectly.