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
1
vote
0 answers

_svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_2__.Filter is not a constructor

Im trying to use Svg.filter.js in a project using webpack (Vaadin) and typescript, but I stumpled upon a weird import issue. I need to use the constructor Filter out of svg.filter.js , but this constructor is in the module svg.js. Now, my import…
Sebastian G.
  • 616
  • 1
  • 7
  • 25
1
vote
1 answer

Make HTML Canvas generate PDF-ready Line art?

I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph: I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when I print this page to PDF, I get a bitmap—presumably because canvas is…
vy32
  • 28,461
  • 37
  • 122
  • 246
1
vote
1 answer

Attach SVG that was created in code (not fetched from server) to an element in angular (avoid getting 'unsafe')

In my angular 10 app, I am using a library (svg.js) to create an svg in the client (although I think my question is independent from what library I am using). let svg = SVG().size(this.widthpx, this.heightpx).svg(); //returns an svg, …
SLLegendre
  • 680
  • 6
  • 16
1
vote
1 answer

How to use feTurbulence and feDisplacementMap with `svg.filter.js`?

This SVG filter:
billc
  • 1,791
  • 4
  • 16
  • 25
1
vote
0 answers

Problems with scale and pointAt in SVG.js

I am currently building a project with Angular and SVG.js. I draw several paths and scale them. I also use the pointAt()-function, which gives me certain points on the path. However, my problem is that when the paths are scaled, the path…
ines
  • 234
  • 4
  • 15
1
vote
1 answer

Cannot Animate a Polygon Created by a Function in SVG.JS

I've written a JavaScript function that creates a triangle (MyFirstTriangle). The triangle displays perfectly as one would expect. However, when I try to apply an animation to the triangle I get the "ReferenceError: MyFirstTriangle is not…
Theodore Fox
  • 11
  • 2
1
vote
1 answer

Calculating SVG arc path on circle

i am trying to draw a SVG objects similar to pie chart using the SVG path element. I had earlier used the example from this stackoverflow post to generate the SVG arc path. But somehow my two arc which are supposed be part of same circle dont form…
Balaram26
  • 1,349
  • 3
  • 15
  • 32
1
vote
0 answers

Monitoring timeline progress to display an updated scrubber with svg.js

I'm running an animation on a main timeline. It consists of many individual runners. I need to be able to display a progress scrubber, and I'd ideally like to drive this from the animation event handler. However, the timeline doesn't seem to have…
pragdave
  • 11
  • 1
1
vote
1 answer

Clear and re-draw using svg.js

I want to draw some elements using svg.js then clear the canvas and draw new elements. I'm using draw.clear() but when I re-draw the elements, they aren't visible. Is this approach correct or am I missing something? I also tried remove(). var width…
Bejuco
  • 133
  • 12
1
vote
1 answer

How to add a link or wrap with a tag the circle using svg.js

I am using svg.js to create circles with text inside and centered I was able to do that let draw = SVG('main'); // this is for the text draw.plain(ele.ticket_id).attr({ x: posX, y: posY, fill: '#fff', …
dashred
  • 131
  • 1
  • 12
1
vote
1 answer

Clone a SVG Rectangle with SVG.js

Hello i am trying to clone this SVG rectangle with the svg.js library. I tried it like this but it does not seem to work or do i have to do something else so it actually appears/gets drawn? var rect = draw.rect(1650, 850).move(100, 20).attr ({ …
NoobOnStack
  • 95
  • 8
1
vote
0 answers

SVG.js bbox issues and positioning issues

I am using SVG.js V3/svgdom and trying to get together a drawing system in which I have a series of javascript classes, each of which outputs a canvas group that can contain one or more svg elements. These classes maybe them be combined into other…
Bigus
  • 71
  • 3
1
vote
0 answers

SVGjs Image - changing colors with Fill & Stroke not working

I am loading an SVG image with SVG.js, which works as expected. When I try to change the color using fill or stroke, it does not seem to work. I have tried fill(), stroke(), attr(), css, etc. Does fill work on images? https://jsfiddle.net/9mL8c2q0/
agent provocateur
  • 824
  • 3
  • 19
  • 39
1
vote
2 answers

Firefox messes up SVG Use/Defs

I have a simple SVG that sets a viewbox and draws a rectangle. it also defines that same rectangle in and uses it on the same position as the first. My expectation was that both rectangles should be overlapping exactly. Chrome does that as…
Simiil
  • 2,281
  • 1
  • 22
  • 32
1
vote
0 answers

Remain in mouseover-state after click on svg-rect (no hover, no css)

I execute some functions when a certain element got a mouse over. I execute some other functions (that basically revert the previously executed functions, as I can't find a way to just "rewind" it like I could possibly do with css and hover) on…
kalsari
  • 25
  • 6
1 2 3
…
26 27