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

How do I prevent SVG JavaScript images from getting cut off?

I have run into a problem that I can't figure out. For some reason, my SVG images keep getting cut off. I have been digging through the SVG docs. Here is the code: var draw = SVG().addTo('#drawing').size(300, 300) var Circle =…
Jadon Erwin
  • 551
  • 5
  • 25
2
votes
0 answers

Angular keep order when rendering data

I'll start off by showing what components I have - main.component.html
Vdas Dorls
  • 485
  • 2
  • 8
  • 19
2
votes
1 answer

Changes to the javascript file are not reflected

I'm making an interactive decision flow chart that uses svg.js. I'm working from this example. I'm editing the flowsvg.js file that I've linked to my HTML file. Nothing happens when I make changes to the .js file, but if I delete the file the flow…
Lauren D
  • 23
  • 3
2
votes
1 answer

Save generated SVG with svg.js as .svg file

I'm trying to save the elements i'm creating with svg.js as a .svg file automatically after they are created. The library has the svg() method to export SVG but I haven't found examples to learn how to use it. For example, if I want to save the rect…
Bejuco
  • 133
  • 12
2
votes
2 answers

Bounding box / bbox for a group after rotation in svg.js

Using svg.js, I have drawn a (game) board, which is essentially a group of hexagon shaped paths. After all hexes are added, I would like to rotate the whole group by -60 degrees, and then read out a minimal, rectangular box that encompasses the…
DavidP
  • 105
  • 3
  • 12
2
votes
0 answers

Export the drawn shapes as Image in SVG.js

I'm using SVG.js to draw shapes. I want to save the drawing as an image(.png). Any suggestions to do this?
Sharmi
  • 23
  • 4
2
votes
1 answer

How to properly import SVG.js 3.0.x version into a Typescript Create-React-App project

As my problems' topic hasn't been answered in detail in any other thread nor there is no good answer at the official Svg.js web-site I am posting it in a new thread with a detailed specification of the problem. 1. My dev stack is: a.) CRA…
BartB
  • 413
  • 1
  • 5
  • 9
2
votes
2 answers

How can I dynamically update SVG viewBox values from Polygon

I have created SVG maps of a comic book page panels.
cnario
  • 31
  • 1
  • 5
2
votes
3 answers

How do i use SVG.js plugins in vue.js?

I am using svg.js in my Laravel project running vue.js. This is how i use svg.js Step 1: Install svg.js as a plugin in my vue app. import svgJs from "svg.js/dist/svg" export default { install(Vue) { Vue.prototype.$svg = svgJs …
Shahbaz A.
  • 4,047
  • 4
  • 34
  • 55
2
votes
1 answer

"SVG is not defined" when using svg.js

I am trying to make a basic rectangle inside of my webpage using svg.js. I have the library installed via npm and i have refrenced the source file in a script tag, but my SVG drawing will not show up. The console provides the error, "Uncaught…
Jack Allard
  • 23
  • 1
  • 4
2
votes
1 answer

How can i use timelines in version svg.js 3.x

There seems to be a new timeline-feature in svg.js Version 3.x. I'd like to try this feature but I don't understand the api. As far as I see, the documentation has not been updated yet. Could you please give me an example that shows me how to get…
michael
  • 45
  • 8
2
votes
2 answers

Trouble loading "@svgdotjs/svg.js" (3.0.11) in TypeScript test code managed by Jest

I am consistently getting the error "Cannot find module '@svgdotjs/svg.js'" in a TypeScript project, even though VSCode sees the library in node_modules just fine. Maybe I'm just completely not understanding how modules work! The library builds fine…
Aaron
  • 87
  • 2
  • 9
2
votes
2 answers

How to get SVG.JS 3.0.+ working with svgdom and node.js

SVG.js 3.0.5 has been released and i wanted to update my nodejs app, which is generating svgs using the library from 2.7 to 3.0.5. To run this library with node.js you need to use svgdom (https://github.com/svgdotjs/svgdom) The problem here is that…
2
votes
2 answers

Get the id of SVG element that was being dragged

I am using svg.js and dragg.js to move around a series of dynamically created objects (rects and circles etc). They are all in a group called nodes, I can get the positioning of the item being dragged but I am lost at trying to retrieve the g…
adamprocter
  • 856
  • 1
  • 15
  • 31
2
votes
1 answer

Tween shape position so it smoothly follows cursor instead of jumping?

How can I make the white rectangle continually and smoothly follow the cursor position using the move function with a tween? What I've got so far doesn't work properly — the rectangle position only updates…
James Greig
  • 1,683
  • 1
  • 11
  • 16
1 2
3
26 27