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

How to create a custom svg.js element using SVG.invent()?

I just don't get it. Documentation explains how to create a custom rectangle with rounded corners, but how should I create, for example, a rectangle with some text inside, just like this one: +---------+ | | | Hello | | …
keyfan
  • 23
  • 9
0
votes
0 answers

SVG.js nested svg, avoiding two svgs

This is all using SVG.js I have instantiated an svg, and am trying to append a child svg that I am loading from a file. Here is the pseudo-code: let myDoc = ...my root svg element; let myChildSVG = ...require('UIElement.svg'); let child =…
Ariel Jakobovits
  • 1
0
votes
1 answer

Which are svg.js use cases and limitations for animation?

Could you please give some informations about svg.js use cases, particularly focusing on animations? For instance: environments (browser, export formats, etc...) best performances (how to exploit them) limitations (how to [not] reach them)
SimoneMSR
  • 368
  • 1
  • 6
  • 16
0
votes
2 answers

Using svg.js, how can I access the child nodes of an element?

I am accessing an existing DOM SVG element in my HTML using svgEle = SVG.adopt(svgDocument.getElementById('svg')); How can I access child elements of svgEle without adopting them individually? I have tried elementById = svgEle.select("#" +…
P.Ellis
  • 55
  • 2
  • 10
0
votes
1 answer

SVG.js: Animate matrix via morph() method

I would like to animate a transform matrix using SVG.js. There is a method listed, matrix.morph(), that is intended to do this. I can't make this happen. Below is an example that attempts to apply this method, but it does not do anything. Could…
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
0
votes
2 answers

Default values for svg.js elements

Is there any possibility to set default fill for all newly created elements? this is how i'm doing it now: draw.circle(radius).fill(params); params are always the same so do i need to pass them al the time?
Vexator
  • 181
  • 3
  • 9
0
votes
0 answers

Calculate SVG.Text Length before drawing

I'd like to calculate the length of a text with a specific font before drawing it. I found this stackoverflow answer and used it in my code. This could work nice but for this to work I need to draw the text before I draw the box that is supposed to…
FabianTe
  • 516
  • 4
  • 22
0
votes
1 answer

SVG.js : Shapes extension: animate error

Below is an example that creates at star using SVG.js shapes extension. When I request to animate it from 7 points(spikes) to 10 points(spikes), it generates an error. Any ideas?
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
0
votes
0 answers

SVG.js: Draggable DIV foreignobject

Using SVG.js, I a have div that I placed in the svg as foreignobject. The div sizes nicely based on it innerHTML. I would like it be draggable. I added draggable() to the foreignobject, but it is not working properly: it does not retain the x,y…
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
0
votes
1 answer

Animating a curved motion of an object with svg.js

I want to animate a curved motion (no rotation) of an object by using svg.js. But I can't find any easy solution for this problem. I wrote two little functions which work fine, but it isn't working like a normal animation, and it doesn't run…
qube13
  • 85
  • 2
  • 11
0
votes
0 answers

SVG.Set doesn't act on all elements

TL;DR: Animating transform attribute on an SVG.Set doesn't act as expected, see https://codepen.io/AlexisBRENON/pen/LyPZRG when you hover the svg. Are there some bugs in my code? Full version: I'm trying to animate a simple SVG logo, in a similar…
AlexisBRENON
  • 2,921
  • 2
  • 18
  • 30
0
votes
0 answers

How to transfer value from SVG map

I am collected a SVG map from https://pixelmap.amcharts.com/., I want when I click a city on the map this city value transfer on my data base. How can I do that?
Sakib
  • 126
  • 20
0
votes
2 answers

SVG object isn't going back to its initial position

I'm trying to loop a sequence of animation on a simple block. However I cannot make my block go back to its original position. var draw = SVG('drawing').size(300, 300); var rect = draw.rect(50, 50).attr({ fill: '#a3c' }); function…
Pue-Tsuâ
  • 116
  • 1
  • 6
0
votes
1 answer

Calculate coordinates for 45 degree snap

I have a SVG that draws a line between an origin point and the mouse pointer, what i'd like to do is when shift is depressed (event.shiftKey === true) make the line "snap" to the nearest 45 degree coordinate, the same behaviour you get in photoshop…
TRG
  • 845
  • 1
  • 9
  • 22
0
votes
0 answers

Clean code with svg.js

I am making a resume in HTML5 with the help of svg.js. I have made 5 labels like this: var las = lang.text(function(add){ add.tspan('Läsa').dx(178).dy(145) }) same thing for tal, skr, lys and ord To make as DRY code as possible I then style them…
klesus
  • 196
  • 6
1 2 3
…
26 27