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
1 answer

Drag the image tag inside the group tag of svg

Image tag has been appended inside the group tag of the svg.when the mouse is kept over the group tag and it is dragged the image inside the group tag is not shown ,it shows like a file . I want the image to be dragged not the src file of the image.
rajaguru r
  • 141
  • 1
  • 3
0
votes
1 answer

how to implement zoom in d3 graph of force directed layout and position the nodes

When I was trying out d3 force directed layout, I came across a challenge where I want to zoom this svg. But Its quite tough for me to integrate.I want to remove the scrollers and put zoom for the graph. http://nylen.tv/d3-process-map/graph.php I…
MRK
  • 23
  • 6
0
votes
1 answer

SVG.js doesn't wire its svg element up properly

I have an svg element in my HTML code: Then, in my script I have this call: var drawingPad = SVG('drawingPad').size('100%', '100%').fixSubPixelOffset() Logging with console.log(drawingPad) and…
MarkZ
  • 45
  • 1
  • 8
0
votes
1 answer

Memory leak while re-rendering using raphael.js

Am using raphael.js to render shapes to a canvas, but the problem is that there is a memory leak and the page crashes after some time. Can some one help me how it can be handled ? I am using underscore.js to handle the loop while removing still no…
JDZ
  • 1
  • 2
0
votes
1 answer

How can I edit a svg.js text node at any time?

I find I can't edit a svg text node at any time like HTML node by using "contenteditable" attribute. How mightI solve it? I have referred to this stackoverflow post. But it doesn't work. How can I get the result that when I double-click a svg text…
Houser
  • 1
  • 1
0
votes
1 answer

Can't make a centered rect with svg.js

I would like to have a rect centered on my body. This works for a circle : draw.circle('200','50').fill('#f00').attr({ cx: '50%', cy: '50%' }) This not works : draw.rect('200','50').fill('#f00').attr({ cx: '50%', cy: '50%'…
benoît
  • 1,473
  • 3
  • 13
  • 31
0
votes
0 answers

SVG.js requestAnimationFrame leak

A little background: I'm currently working on a project that contains about 20-30 items with linear gradients which animate their stops continuously throughout the entire run time of the experience. gradient docs animate docs As the site runs, the…
Zach
  • 21
  • 4
0
votes
2 answers

Wrap existing SVG elements using the svg.js library

How can I wrap existing element in svg.js? For example: I know this can be built with svg.js very easy, but I take it as example for my question. var existingSvg =…
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
0
votes
0 answers

importing svg.js drops everything inside a link tag

i load a svg file like this var draw=SVG('container'); var rawSVG=$('rawSVG').get('html'); //get content of invisible div with mootools draw.svg(rawSVG); in rawSVG DIV i can see the link tags. But in container, everything inside of the link tags is…
je mont
  • 1
  • 1
0
votes
1 answer

Reusing SVG.js code for various SVG's

I'm getting to grips with SVG.js I have a pattern effect that I've created and would like to use in a number of SVG's. I can create it in one SVG with the following code... $( document ).ready(function() { var draw = SVG('geo').size(1200,…
cupcakekid
  • 233
  • 3
  • 13
0
votes
1 answer

How make custom drag event in svg.js

I'm new to programming. I'm making something like vector editor with svg.js I've read documentation and didn't understand how to make custom events at all. Can you guys show an example of drag event? Actually i'm trying to achieve elements to be…
Vladimir
  • 11
  • 5
0
votes
1 answer

Snap.svg rotate while moving

Svg.js has a great feature where you can animate the translate and the rotation properties of the transform attribute of an element at the same time. In other words, the object spins about its own center point as it moves across the screen. How is…
Iktys
  • 840
  • 1
  • 8
  • 17
0
votes
2 answers

Obtain width in draggable function SVG.js

I know that I can obtain it with the width or size function, but I'm trying to do it in the moment of the creation of a draggable object. I'm doing this because I need to give a grid effect to the element and also make it stay inside the drawable…
Felix
  • 579
  • 1
  • 8
  • 23
0
votes
1 answer

svg.js rotation center of clipped element

Svg.js animation of rotations works great because it uses the center point of the element by default, even when the element is moving from one spot to another, but now I'm having trouble when I add a clipping path to an image, because the center…
Iktys
  • 840
  • 1
  • 8
  • 17
0
votes
1 answer

Creating an SVG Document in SVG.js issue?

I am new to SVG.js and javascript in general, and I was going over the documentation here http://documentup.com/wout/svg.js#usage/svg-document and was having some issues. Usage Create a SVG document Use the SVG() function to create a SVG document…
XaolingBao
  • 1,034
  • 1
  • 18
  • 34
1 2 3
…
26 27