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
83
votes
3 answers

Snap.svg vs Svg.js

I have tried to find a proper SVG library for modern browsers. My goal is to decide, what library is suitable for creating simple online SVG editor with eg. text and path editing and clipping text with paths. I found two libraries, which may be…
Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
25
votes
3 answers

Create svg arcs between two points

I want to connect two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line () will be straight. If there are two connections, both will be rounded and will be symmetrical, this way: So, in fact,…
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
9
votes
2 answers

Change content of text elements in svg on a node.js server

I am using svg.js as well as svgdom on a node / express server to try to manage to manipulate an svg and then later turning it into a PNG to build a PDF out of. Currently, I've made it this far const window = require('svgdom'); const SVG =…
Jordan
  • 2,393
  • 4
  • 30
  • 60
6
votes
2 answers

How can I fill a polygon with a texture using svg?

I'm currently using svg.js - but I am very welcome to alternative suggestions - is there any way I can create a polygon and then apply a repeating texture to it? Below is an example of what I am attempting to achieve. Here is a jsFiddle which shows…
will
  • 4,557
  • 6
  • 32
  • 33
5
votes
2 answers

Import svg.js with plugins in Angular

I have difficulties importing svg.js with it's plugins using typescript in an Angular 5 project. With npm I installed: svg.js svg.draggable.js In ticket.component.ts: Imported svg.js as Svg type and this way I can draw a rectangle, this code…
balazs630
  • 3,421
  • 29
  • 46
5
votes
1 answer

SVG Rotate Element While Animating svgjs

I'm using Javascript, Jquery, SVG, and SVG.js right now. I would like to rotate a circle about its origin while it's animating. The animation is doing the same thing, so I could use some sort of step function but I couldn't find anything. The…
Preston Hager
  • 1,514
  • 18
  • 33
5
votes
1 answer

Find center of svg shape

Im using svgjs to create my shapes. How can I find the center point of an svg shape and add an element there? In my case a red dot. I can't find any information in the documentation for a method or something that helps in this situation.
Pedro
  • 1,459
  • 6
  • 22
  • 40
5
votes
1 answer

SVG: find point on a curve

Edit: the Answer (credits to @musically_ut for getPointAtLength, but it seems like I have to do the real work myself. Note: the "draw.circle"-syntax is from svg.js) add your own Id to the path with .attr({id: "mypath"}); find it: var a =…
graph
  • 367
  • 1
  • 6
  • 18
4
votes
1 answer

How to give background color to svg element path?

I have converted image to svg and get the path vector like below …
nouman arshad
  • 453
  • 5
  • 15
4
votes
4 answers

move imported svg with svg.js

I'm trying to import an svg snippet with svg.js and then offset it, but it seems like any transformation method I try to use don't work with imported svg. The code I have: var lang = SVG('lang').size(400,400) var swe = lang.svg('
klesus
  • 196
  • 6
4
votes
1 answer

Specify font from font file in SVG using svg.js

For a web project, I'm using SVG with the svg.js library to make my life easier. The svg.js library works perfectly and generates correct SVG so I'm pretty sure everything is working OK on that front. For this project, I can refer to a font like…
David van Driessche
  • 6,602
  • 2
  • 28
  • 41
4
votes
2 answers

How to center text in the rectangle in svg.js?

I'm trying to draw a rectangle with a text centered in it while having the elements grouped. Here my code: var draw = SVG('canvas') var group = draw.group(); var rect = draw.rect(100,100).fill('#f09') group.add(rect); var text =…
atok
  • 5,880
  • 3
  • 33
  • 62
4
votes
1 answer

Mask rotated SVG element

I am using svg.js to draw my SVG. I was wondering, whether it's possible to mask rotated element. I could achieve rotating masked element, which isn't the same. See a minimal working example - http://jsfiddle.net/mreq/LP7sa/1/ - I'd like the rotated…
mreq
  • 6,414
  • 4
  • 37
  • 57
3
votes
1 answer

SVG.js TextPath not aligned with path (Verticaly)

I'm trying to place a text onto a path with svg.js Here is my fiddle: https://jsfiddle.net/Byteschmiede/ytz67egn/1/ var draw = SVG().addTo('body').size(500, 500) draw.svg(`
Byteschmiede
  • 31
  • 1
3
votes
0 answers

Draw multiple polygon inside rectangle based on line intersection point

I have created below SVG using svg.js 2.7 Now I want to draw all possible polygons made based on lines intersection with other line and outer rectangle. I have got all intersection points for lines and lines intersection with the outer rectangle…
Nikunj Shekhada
  • 66
  • 6
1
2 3
…
26 27