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

svgjs transform imported element

Using svg.js I am able to import a fragment from an existing svg file and add it to the dom. However I am not able to then manipulate that element using svg.js. Here is my code. $.get('img/sprite.svg', function (doc) { var figure =…
voam
  • 1,006
  • 13
  • 24
0
votes
0 answers

Draw circle at cornor of svg dynamically

image This image is generated by svg tool. i want to get coordinate of main svg where i can dynamically add circle to simulate it like holes.the dimension of svg will dynamically change.
Brajesh Kanungo
  • 129
  • 2
  • 13
0
votes
1 answer

SVG-animation on hover - first steps, how to?

I'd like to do an animation to an element when hovering it. As I do use svg-elements for both situations (standard and hover-state) I guess I must somehow manipulate the first svg-element when hovering it by editing the svg-code inline. I…
Daiaiai
  • 1,019
  • 3
  • 12
  • 28
0
votes
1 answer

Generate svg.js object for a (SVG) DOM node not created by svg.js

I use svg.js to create an SVG image within a HTML document. However, I want to add a few elements that are not created by svg.js, but rather some other code. I know that there is the .svg() method that takes SVG source and adds it, but I have the…
burnpanck
  • 1,955
  • 1
  • 12
  • 36
0
votes
0 answers

How to get the exact co-ordinate od SVG using svg.js or jquery?

how to get the SVG image exact position of all element(rect,path) using svg.js or jquery, I have to try to get but vary from all element ex(rect, circle,path), Please any one help.
Osiz 4
  • 49
  • 3
0
votes
0 answers

How can i access Javascript objects from python side on jupyter-notebook cells?

I mean i use SVGjs with %%javascript magic cells and for example create a rectangle and then i want to access and change this rectangle using python code. Is there any way to do this?
0
votes
0 answers

creating SVG shapes with Mouse

I use svg.js together with 3 plugins to create svg drawings with my mouse. My questions is about those plugins. I am using svg.draggable.js, svg.select.js and svg.resize.js. When i try to use the 3 plugins at the same time, it doesnt work. My…
Pedro
  • 1,459
  • 6
  • 22
  • 40
0
votes
1 answer

How to select and can be zoomed using svg.pan-zoom.js?

I use svg.js and svg.pan-zoom.js to make that svg can be zoomed using scroll. like svg.pan-zoom.js's demo (this) This is my code, just for test. Document
0
votes
1 answer

how to append text to svg path via javascript(svg.js)

Hey I have some svg elements which are open paths and I want to add to them some labels. Now my original code was in canvas and I am looking for a techinuqe similiar to canvas(fillText) where you can add text label to your svg elements. I am adding…
Brk
  • 1,247
  • 2
  • 23
  • 55
0
votes
1 answer

Passing an array to feed svg.js's polyline array method throws an error

I'm using svg.js's polyline array method to draw lines from values logged by storing the cursor's x,y coordinates on a page. The idea is to first let a user browsing the page and move the cursor around, and so feed values into the array, then when…
user6244167
0
votes
1 answer

Code with svg.js not working in JSFiddle.com or my laptop

Newbie to svg.js... I first tried the example available at https://jsfiddle.net/wout/Vac2Q/ in safari on OS X and clicking run only makes the result pane white and then grey again. The code is here...
/* create an svg…
Ram
  • 325
  • 4
  • 22
0
votes
1 answer

SVG mask always turns element invisible

I'm using Chrome 49.0.2623.87 (64-bit) on Ubuntu 15.10. Doesn't work in Firefox either. I have the following code using svg.js: function blockmouseenterHandler(){ console.debug('mouseenter') var mask =…
Seán Hayes
  • 4,060
  • 4
  • 33
  • 48
0
votes
2 answers

How to generate text gradient with snap.svg or svg.js

I have this svg Created with Snap
Bogdan Galan
  • 65
  • 1
  • 8
0
votes
1 answer

nested svg ignores transformation in Chrome and Opera

I experienced somewhat that I would call a bug. I have the following 2 svg:
Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
0
votes
0 answers

SVG :Check the mouse event point are lie on arc

My Arc points is: And my mouse point is : MouseX:567.9578247070312 mouseY:279.65753173828125 I want to find if…
Nitesh singh
  • 915
  • 11
  • 21