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
2
votes
1 answer

Check if the variable is a SVG.js element instance

I'm using the svg.js library. How can we check if a variable x is an instance of SVG class? I tried: new SVG(document.createDocumentFragment()) instanceof SVG // false new SVG(document.createDocumentFragment()).contructor === SVG // false
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
2
votes
0 answers

SVG performance optimization for browser

I am working on a design tool using SVG. Any other vector formats will be converted to SVG and rendered on the browser with svg.js I started seeing delays while dragging and moving the elements, when the number of elements increased. Are there any…
Sreenath Nannat
  • 1,949
  • 1
  • 13
  • 18
2
votes
2 answers

Create an irregular matrix of triangles SVG.JS

I have been experimenting with a library named SVG.JS, which is wonderful and powerful. I want to fill all the screen with irregular polygons but I don't know how to make them fill all the screen, independently of the size of it. How could I do…
user3589630
  • 21
  • 2
2
votes
1 answer

svg.js strange interaction of scale and move/center

I'm not very familiar working with svgs in js but here is something that is definitely strange. I'm having an arrow and then a path that is supposed to fill that arrow to a certain extend. looks like this: Now my aim is to be able to scale the…
suMi
  • 1,536
  • 1
  • 17
  • 30
1
vote
0 answers

"this.root() is null" errors when using clipPath and MaskPath - SVG.js

I have a routine that attaches an image to my SVG canvas and on load, it creates a rectangle with rounded corners so I can clip the image. This is run multiple times, fed by an array of image addresses. Method 1 - clipWith() The clipping does work…
RieMars
  • 51
  • 5
1
vote
1 answer

how to destory an animation?

I made a scale animation test: var btn = document.getElementById('testBtn'); var stopBtn = document.getElementById('testStop'); var runner; var startSize = 20, endSize = 80; const start = startSize === 0 ? 0.001 : startSize / 100; const end =…
wpindesign
  • 23
  • 7
1
vote
1 answer

How to change the start position of svg image using animateMotion?

I am trying to change the start position of an svg image to animate it along a path using animateMotion You can check the current result here https://jsfiddle.net/7espvwuz/ In this fiddle I am using a circle to mock my image. The problem is if I…
Amine
  • 2,241
  • 2
  • 19
  • 41
1
vote
1 answer

Create svg path using svg.js and opentype.js

Hi all I'm getting successfully grabbing svg path data using opentype.js but having trouble using that data with svg.js to render the path: Below is my code which currently creates an svg with an empty group where I was expecting the group…
James
  • 1,355
  • 3
  • 14
  • 38
1
vote
1 answer

Inserting SVG elements from another SVG element with plain JS

I am trying to dynamically render the content of a SVG element using svg.js library (https://svgjs.dev). Everything works fine when creating basic elements, like lines, polygons and simple textx and working with their properties. Now, I would like…
stefanu
  • 197
  • 2
  • 13
1
vote
0 answers

`use` apparently converting what it thinks are shortened hexadecimal colour strings

I have an application where a bunch of glyphs get loaded into defs and then placed on a game board (https://github.com/AbstractPlay/renderer). I was running into this odd issue where sometimes pieces wouldn't get rendered. I narrowed the problem…
Aaron
  • 87
  • 2
  • 9
1
vote
1 answer

CSS background color not working for overflowed SVG content

Issue: Not able to give background color to the whole content and I assume this is because I gave CSS style ("overflow", "visible") or may be because of (position: absolute) on parent. I want whole content to take background color as either grey or…
Eric
  • 123
  • 9
1
vote
2 answers

Rotate text around a pivot

I'm simply trying to rotate the text having the center of the circle as pivot. I'm not clear how rotate(degrees, cx, cy) works (https://svgjs.dev/docs/3.0/manipulating/#rotate). var draw = SVG().addTo('body').size(300, 130) var g = draw.group() var…
alfredopacino
  • 2,979
  • 9
  • 42
  • 68
1
vote
1 answer

Implement Zooming with viewbox in nested SVGs

I have been tasked to implement zooming in custom charts based on SVGs. Before i had one element. I looked into either using the transform or the viewbox approach and decided for the viewbox approach. Since i have to support zooming on just…
Mav3N
  • 41
  • 2
1
vote
2 answers

Why the lines don't appear on my circle in my SVG elements

so I want to make a clock and as you see in the program below, the lines don't appear on the circle and they are nowhere to be found. please help me I can't figure out the reason. this is the first time I'm making an SVG drawing and I would never…
Pink Cat
  • 31
  • 5
1
vote
0 answers

svg.js, click event does not fire when animation is running

I try to bind a click event on symbol in a svg. When a element spinns in the symbol, the click event is not fired, stops/pauses the animation, the click event fires. How can i fix this, that the click events get fired every time i click on it,…
Marc
  • 2,920
  • 3
  • 14
  • 30
1 2 3
…
26 27