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

SVG fill inside path with no intersections

I'm trying to fill the following path and while I expected it to be filled inside the stroke line I get the following shape (black fill): I've tried changing fill-rule from nonzero to evenodd but with the exact same result, what should I do?
Joaquín L. Robles
  • 6,261
  • 10
  • 66
  • 96
2
votes
1 answer

How do you pause a looped animation in SVG.js?

I’ve got a looped animation that looks like this: foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).loop(); I want to incorporate a delay of 800ms into each loop. Specifically before each time the stroke animates to { opacity: 0,…
Brandon Durham
  • 7,096
  • 13
  • 64
  • 101
2
votes
1 answer

Rotation of polygon by angle javascript

I would like to rotate a polygon I have array of polygon like this [ [-17.999999999999986, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ] Fist step: I calculate the Centroid function getCentroid(coord) { var center =…
imtah
  • 409
  • 1
  • 6
  • 16
2
votes
2 answers

Using svg.js with TypeScript

I'm making a website app using TypeScript, and I want to use the svg.js library. I'm coding in TypeScript, and automatically compiling into JavaScript which runs in the browser. Is this possible? And if so, how?
Magmatic
  • 1,754
  • 3
  • 19
  • 34
2
votes
1 answer

How to Place an SVG Image at the Beginning of Text on a TextPath

Here is an image of what I'm trying to achieve. I have some text that is curving along a path. I want to place an SVG image at the beginning and/or end of the text. In this example it's a ribbon. But how can I place the ribbon at the…
Chad
  • 1,708
  • 1
  • 25
  • 44
2
votes
1 answer

cant draw a path using svg.draw.js

I am making a very simple designing tool using svg.js and svg.draw.js, in which user make a simple design using line, polylines, rectangles and free hand drawing as well. svg.draw.js is an extension of svg.js which allows to draw elements with your…
Abdullah Danyal
  • 1,106
  • 1
  • 9
  • 25
2
votes
2 answers

SVG.js line marker-mid

im trying to put the marker-mid on the line element, im using SVG.js. For example im using this code: var draw = SVG('yourdivid'); var line = draw.line( 100, 100, 0, 0).move(20, 20); line.stroke({ color: '#000', width: 2}; now how can i put the…
omar
  • 21
  • 2
2
votes
0 answers

SVG.js: Need animation easing "=" (external control) example

I'm attempting to understand why/how the SVG.js animate easing type "=" (external control) is used. When is this needed? How is it applied? Below is an example showing the performance all the types of easing in SVG.js, excluding the external…
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
2
votes
1 answer

resize nested and imported svg with svg.js

heres a pen of what i'm trying to do: http://codepen.io/amcc/pen/RVVRPX/ (simplified code below too) i'm importing raw svg, then nesting it - as this is needed to allow it to be dragged. I want to be able to rescale the svg, whats the best way? line…
amcc
  • 523
  • 5
  • 16
2
votes
1 answer

How to clip an SVG plot?

My SVG element is setup as this: svg.attr("viewBox", "0 0 " + chartView.displayWidth + " " + chartView.displayHeight); inside I'm drawing some plots. Is there a way to create a "see through window" inside which I can see my plots? I tried…
Gianluca Ghettini
  • 11,129
  • 19
  • 93
  • 159
2
votes
2 answers

Is there a way to make svg.js work with node.js

Did someone of you try to make svg.js work with node.js? I tried to use the jsdom module to render svg but jsdom but SVG.supported returns false. Is there a way to make this library work with node.js? Thanks in advance! EDIT: Here is my code, I want…
user2005317
  • 21
  • 1
  • 5
2
votes
1 answer

svg.js rotating element rotates whole coordinate system

Using svg.js version 2.1.1 When trying to rotate object and then move it, it looks like the whole coordinate system is rotating, and not only the object. It's like both axes are rotating with the object. This is not desired by me - I would like to…
Kevros
  • 23
  • 4
2
votes
1 answer

Javascript: Difference Between DOM elements and Objects/"Undefined Is Not A Function"

After several hours of trying to figure this out and reading documentation, I'll surrender on this one. I come from a C/C++ background trying to learn Javascript and I'm getting a little confused on what the difference is between a DOM element and…
Aaron Chamberlain
  • 653
  • 2
  • 10
  • 26
2
votes
1 answer

How to store additional data in SVG?

I have a small editor that creates .svg files with diagrams (using svg.js). The editor stores data about how the file created in its own simple text format, not unlike this one. I would like to embed the source text directly in the SVG file, so I…
Alexander Gladysh
  • 39,865
  • 32
  • 103
  • 160
2
votes
1 answer

Invert mask with svg.js

I'm starting to use svg.js on a project, and as I was playing with masks, I couldn't manage to invert them. I drew a rectangle, and a circle, using the circle as a mask for the rectangle, only showing the part of the rectangle that's inside the…
Romain Braun
  • 3,624
  • 4
  • 23
  • 46
1 2 3
…
26 27