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

In SVG.js why does the clear() method throw an error in this example?

In this example below, why does the draw.clear() method throw the error TypeError: Cannot read property 'parentNode' of undefined at create.clear? What can I do to get the clear method to work and not throw any errors? import * as SVG from…
Chad
  • 1,708
  • 1
  • 25
  • 44
0
votes
1 answer

How can I set the position of an element relative to the bottom or right side using svg.js?

I need to have some text on the bottom of a svg. I want the text 0px from the bottom. I couldn't find a solution in the docs.
user1781498
0
votes
1 answer

Using JavaScript with arrays, color and interactivity

Thank you for being willing to look at this. I'm a Newbie. I have several arrays the values of which I would like to translate to changing the colors in a single line of dots on an HTML site. There are 144 dots and the array is 72 digits long so…
JJohnson610
  • 1
  • 1
0
votes
1 answer

SVGJS transformation chain

I've really tried hard with this: var vw, vh; var triangle_base = 100; var triangle_height = 50; vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); vh = Math.max(document.documentElement.clientHeight,…
Gooze
  • 73
  • 1
  • 10
0
votes
1 answer

SVG file script not working in html

What I want to do is create an svg file in which I have 2 cylinders, one inside the other representing tank and liquid. I want the inside cylinder to move according to the percentage of liquid given. I have achieved this and the code is working fine…
Sneha Polavarapu
  • 1
0
votes
1 answer

Drawing custom SVG in SVG.js not giving separate SVG element

I have an svg file that I'm loading via XHR I'm successfully drawing the circle onto the drawing via draw.svg(circle); where circle is a string containing the svg markup. The circle appears on the…
DonutGaz
  • 1,492
  • 2
  • 17
  • 24
0
votes
1 answer

Can I override a draw function in SVG.js?

If for example, I when I drew a circle using SVG.js, is it possible to override the .circle() or .ellipse() function so that it draws a radius line like the image? I'm wanting something like SVG.Ellipse = SVG.extend(SVG.Ellipse, {...}) (Assume that…
itcropper
  • 752
  • 1
  • 7
  • 21
0
votes
0 answers

Cannot reference element of existing svg

There seems to be several ways of almost doing this. If I load the svg image with svg.js apparently I can access its elements by id. According to the docs I can get the same result using SVG.adopt but that requires an object reference. Using…
stephen
  • 385
  • 3
  • 24
0
votes
1 answer

.use is not cloning .svg elements in SVG.js

When I try to multiply the imported inline SVG bye using .use function it renders an empty element but the same function works just fine with something as simple as rectangle. Is SVG.js capable of cloning complex elements? HTML:
1GR3
  • 349
  • 2
  • 12
0
votes
2 answers

drag event is being fired on click

TL;DR: event that should be fired on element drag is being fired on element click. I'm using svg.draggable.js and it has 4 custom events, the ones important here are dragstart and dragmove. dragstart fires when the user clicks the element, while…
Korok White
  • 3
  • 1
  • 5
0
votes
2 answers

Unexpected polyline generated by SVG.js at node with svgdom

I have different svg strings generated by svg.js in browser (correct one) and at node (incorrect and with exsessive inner svg element) Here is my code for browser: let size = { width: 512, height: 512 }; let entity = { x: 232, y: 162, rx:…
Yuri Gor
  • 1,353
  • 12
  • 26
0
votes
1 answer

How to access element from custom event using svg.js

Using svg.js, how do you access element from custom event? myCircle.on('someEvent', function(event) { var circleX = event.x(); // event.x is not a function circleX = event.target.x() // event.x is not a function circleX =…
vidriduch
  • 4,753
  • 8
  • 41
  • 63
0
votes
1 answer

SVG.js scale and move path in straight line

How to make SVG.js path animation follow straight line when moving and resizing? There is 2 part animation. Firstly text as SVG path is scaled up and moved to the center of rectangle. Later it needs to scale down to original size and move to…
Margus Pala
  • 8,433
  • 8
  • 42
  • 52
0
votes
1 answer

Make a circle draggable along a path svg

I work on a project on svg using the SVG.JS plugin. I want to let the circle follow the path, when dragged
Abdelkadre El Maghri
  • 13
  • 7
0
votes
3 answers

How to achieve a glowing straight line in svg

How to achieve a glowing straight line in svg，that some halo around it. I have tried filter, but it couldn't work on the straight line. I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve…
cyhone
  • 293
  • 1
  • 4
  • 12
1 2 3
…
26 27