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
0
votes
2 answers

SVG.js error on animating path plot

I'm trying to animate a path using SVG.js but it keeps showing this error: Uncaught TypeError: Object m774.042297,414.434357c-4.302734,0 -9.586304,-3.046783 -11.741272,-6.771179l-15.146057,-26.174835c-2.154968,-3.724365 -2.154968,-9.817963…
KwiZ
  • 1,364
  • 2
  • 15
  • 25
0
votes
1 answer

SVG JS - text color

Hei,I'm trying to change the text color of a text that I'm adding using svg js. my code looks like this: var elecChangeText=elecChange.toString(); var elecPercentageText = energyArrow.text(elecChangeText); elecPercentageText.font({ family: …
suMi
  • 1,536
  • 1
  • 17
  • 30
0
votes
3 answers

Loop animation with svg.js

I have a very simple animation with svg.js that I would like to run on a loop as long as the page is open. I haven't been able to find any thing while looking through either the github, documentation, or stack overflow pages. A working version of…
kjones603
  • 33
  • 2
  • 4
0
votes
1 answer

Can anyone help me out for side flip function using svg.js

I have written a flipUp function by using svg.js for fliping up and down an image. I need a side flip function also but I can not be able to implement side flip function by using scale(1,-1). Can anyone help me out? function flipUp written in…
user1504287
-1
votes
2 answers

How to draw letter R with SVG

I have a svg of letter B here is the code:
Nasyx Nadeem
  • 241
  • 2
  • 12
-1
votes
1 answer

SVG.js How do I add an svg to the HTML page

I have a page that will show several svg images that will be generated from json data. I created a javascript class that will generate the svg but I don't know how to add it to the dom. As a simple example:
kuru
  • 77
  • 1
  • 1
  • 4
-1
votes
1 answer

Plot nodes in d3.js Heatmap - Need Guidance

I'm new to d3.js implementation. Need some help d3.js heatmap I have a Requirement : A heat map which shows the difference between each record. based on records Severity and Probability types: Desired Image : Data: In the Above output picture ,…
Tarun teja
  • 59
  • 3
  • 7
-1
votes
2 answers

Calculating path length of test

I am trying to solve a problem where i need to know the length of the path of the text typed by the user. Example a user Types "Hello World" i need to check what will be the length of the path of Hello world when typed in a certain font with a…
Edi 0
  • 212
  • 5
  • 22
-1
votes
1 answer

Copy transformation from an SVG element to a SVG group

I have an SVG element and need to draw transform points around. I'm using svg.js and part of its resize plug-in. It works for moving and rotating an un-transformed element, but not for an element with a transform matrix. In short I need to get the…
Larest
  • 326
  • 1
  • 3
  • 15
-1
votes
1 answer

How to set the text font before rendering text elements?

I'm having trouble to place a text element at a certain position. According to this issue, changing the font after adding a text element makes positioning a bit harder. Seems to me like positioning would be correct if I could set the font before…
GuiRitter
  • 697
  • 1
  • 11
  • 20
-1
votes
1 answer

How can I add a stroke property to a drawn element?

I have a function that draws circles on my svg element: function drawCircle( pElem, pX, pY) { pElem.circle( 7 ).fill( '#00FF00' ).move( pX, pY ); } //drawCircle But I want to add a black stroke to the drawn element like this: function…
K_dev
  • 337
  • 2
  • 9
-1
votes
1 answer

SVG shapes with fill, stroke and strokewidth

I have a polygon shape with border, stroke-width and fill colors. I am looking for multiple polygon shapes; below is one of them with 4 edges. Out of which 3 edges just have stroke and the other edge has fill color. From above figure we have one…
user10519853
  • 135
  • 1
  • 1
  • 10
-1
votes
1 answer

Set drawing boundaries to image constraints with svg.js

I'm using svg.js and I'm loading an image into a SVG.Doc. The image size is sometimes smaller than the SVG.Doc element. How can I limit the drawing size to the bounds of the image once loaded so that it is not possible to draw outside of the image.…
cbarlow123
  • 217
  • 5
  • 18
-1
votes
1 answer

Setting Angular2-style attributes on HTML node

I am migrating an application from Angular1 to Angular2, in which I used the svg.js library to draw an SVG. Some elements of the SVG contained "ng-click" directives, that I made the SVG library print to the final SVG. That worked alright in…
Jan B.
  • 6,030
  • 5
  • 32
  • 53
-1
votes
1 answer

Center a SVG with preserveAspectRatio attribute and svg.js

I am working with svg.js and I am trying to put in the middle a svg. I am using the attribute preserveAspectRatio, but it doesn't work. I have defined the viewbox, but when I write the preserveAspectRatio the last SVG disappear too and I don't know…
Ivanhercaz
  • 731
  • 1
  • 11
  • 31
1 2 3
…
26
27