401 questions
0
votes
0
answers
55
views
Resize rotated rectangle with skew
can you please tell me how to calculate the compression of a rectangle in svg. let's say there is a rectangle with x0, y0, w100, h100, r45, it is in an imaginary box, I have reduced this box by 50px, ...
- 51
0
votes
2
answers
65
views
SVG.js addTo() cannot find target DOM on Svelte
I wanted to add a simple SVG example that is manipulatable with SVG.js
I tried this.
<main>
<section class="center">
<h1>Hello!</h1>
<p>This ...
0
votes
2
answers
215
views
How can I draw text using SVG.js?
I am trying to figure out how to use SVG.js to draw text. In my attempt below, the text is being created and drawn, but only a few dots show up. This must be part of the text being drawn, but it is ...
- 796
-1
votes
1
answer
72
views
gradients created in SVGjs don't render
I am working out bugs in an SVG editing program. So far most images import correctly, but I'm having problems with gradients.
A working version of the code is at geewhiz.ai
The following image does ...
- 857
0
votes
0
answers
57
views
return bounding box of transformed text element using SVG.js?
I am using SVG.js and trying to fetch the bounding box of a transformed text. I made a small example of my use case:
this.draw.attr({ width: 200, height: 200 });
const text = this.draw
...
- 491
0
votes
0
answers
97
views
Check intersection and draggable svg path (svgdotjs and kld-intersections)
enter code hereI have a problem. I'm trying to write code. The goal is that if two svg shapes possibly intersect, they cannot intersect. But my code works out so that if the shapes intersect, they get ...
- 1
0
votes
0
answers
56
views
Matter.js / SVG.js issue with Safari 'ReferenceError: Can't find variable: draw'
I'm working on a site that uses matter.js in a particular section to add some floating shapes to the background of the div. One of the shapes is a semicircle, which I used svg.js to create the shape. ...
- 51
0
votes
5
answers
694
views
Simplify any SVG path to create a solid black shape (UPDATED)
Is it possible to transform any SVG into a solid black shape in an automated way (in javascript or otherwise) by simplifying the path?
Is there a library to do this, or is there another way?
Let's ...
- 111
1
vote
0
answers
72
views
Want to convert canvas into svg image at run time with text formating
I am putting text in textbox and selecting shape to fit into. For now I am getting canvas image that is not too clear. I am planing to change my canvas into SVG image format.
For Example here I want ...
0
votes
1
answer
49
views
Undefined Text positioning SVG js v3
There are 2 cases with undefined behaviors of Text object positioning.
First Case
For example I want to position Rect at (50, 30) and Text at (0, 30) coordinates.
var draw = SVG().addTo('#app')
var ...
- 39
0
votes
1
answer
145
views
SVG.js get function to run after animation timeline has completed running and then reverse the animation to original state
With the this code i create a timeline and bind it to a svg element and want a function to run after the timeline is completed and then reverse back to initial state. As documentation use ...
var ...
- 11
1
vote
0
answers
158
views
SVG.js animation of rotate and scale while moving along a path
I have successfully gotten a rectangle to move along a path but have not been able to have it rotate and scale while staying on the path. The moment i specify the rotate and scale attributes it ...
- 11
0
votes
1
answer
83
views
SVG.js - Export nested SVG with Clip intact?
I have an SVG.js canvas that has a nested artwork and a nested UI on top that controls it. I want to export the artwork which is clipped. The issue is the Defs and SVG headers are at the root so they’...
- 3
0
votes
2
answers
75
views
SVG.js version 3.0.5 - Animate a rectangle to move along a specified path
I have come across a working example of using SVG.js version 2.5.0 for moving a rectangle along a path in jsfiddle. I am trying to duplicate the same behavior but in SVG.js version 3.0.5 but keep ...
- 11
1
vote
2
answers
71
views
Bubble fire event in svg.js
I have this structure:
___________________
| g1 __________ |
| | g2 | |
| | | |
| | ____ | |
| | | r1 | | |
| | |____| |
| |__________| |
|...
- 2,341
0
votes
2
answers
222
views
Trying to do a very simple clip/mask in SVG.JS
I have a white inner circle and a blue outer circle.
I am trying to clip out the white inner circle to leave a blue ring.
(I know I can achieve the same thing using a single circle and a stroke, but I ...
- 31
0
votes
1
answer
98
views
svg.js: how to move and rotate togther?
I want to make the rect move and rotate togther, but the result is not as expected, so how to realize my requirement ?
var ele = document.getElementById('svg_1')
var btn = document.getElementById('...
- 23
0
votes
1
answer
102
views
Can I apply the transform to a path so the transform itself is no longer needed?
Is it possible to "apply" a transform to a node using SVG.js? I'm not asking about how to add a transform attribute to a node, but recalculate that node's coordinates so the transform itself ...
- 187
2
votes
1
answer
1k
views
Halftone image effect with SVG filters
I am trying to translate specifications from Photoshop to svg filters.
The recipe is:
Filter > Pixelate > Color Halftone
All 4 channels 45 degrees
Radius of the dots between 5-8
The process, ...
- 11.4k
0
votes
0
answers
102
views
Why does my SVG generated with svg.js have a "strange margin"?
I want to create a web application consisting of a header, footer, and left and right sidebar layout, where the size is set according to the children, and a main container that fills the rest of the ...
- 345
0
votes
1
answer
293
views
How to specify custom elements in SVG defs section using svg.js & svg.filter.js libraries?
I am using svg.js to generate a dynamically-resizing control panel. I'm also relatively new to JavaScript and this project is a learning exercise, please forgive my early-stage ignorance.
I have been ...
- 3
0
votes
0
answers
27
views
Create data URI and include (defs) / use tags (linked svg's)
I'm trying to create a data URL from my draw.svg() but the SVG.Use images aren't included.
First image is SVG with defs / use tags
The second image is the result of: "data:image/svg+xml;base64,&...
- 115
0
votes
1
answer
478
views
how to draw a rect with diagonal lines with konva or svg.js and the lines is even spacing fill the rect
*The Scenes:*
I use konva to draw a diagonal line in a rect,
the rect api fillLinearGradientColorStops meet my need ,
when the value of fillLinearGradientColorStops Array length is smaller 200,the ...
- 520
1
vote
2
answers
385
views
Load SVG from file and display it in existing SVG using svg.js
I want to load an SVG from a file and then place it in an existing HTML SVG element (i.e, a group) using svg.js
I am facing two issues:
How to load SVG from a file using svg.js?
Add the loaded SVG to ...
- 136
0
votes
3
answers
271
views
Fill Shapes/Icon In SVG Path (js)
I have a SVG with path
<svg width="100" height="100" stroke="black" fill="transparent">
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</...
- 431
1
vote
0
answers
32
views
"this.root() is null" errors when using clipPath and MaskPath - SVG.js
I have a routine that attaches an image to my SVG canvas and on load, it creates a rectangle with rounded corners so I can clip the image. This is run multiple times, fed by an array of image ...
- 51
0
votes
1
answer
120
views
Importing SVG in svg.js
I have created a little sandbox to test this out but according to the docs I should be able to import an SVG using svg.js using https://playcode.io/1024624
mounted() {
this.$nextTick(() => {
...
- 4,236
0
votes
0
answers
218
views
Embed svg image to PDF file in C#
How can we add svg file to a pdf file proramatically using c# or Js
Should not use any third party library
- 1
-3
votes
2
answers
1k
views
How to crop svg?
I have an super large svg background and some elements are rendered on top of the background. I then want to crop the svg such that it fits the elements in the foreground and the background is cropped....
- 375
0
votes
0
answers
33
views
How to useEffect in component that is rendered in another component
This is what I am trying to do:
import { SVG } from '@svgdotjs/svg.js'
const SVGpaper = (props) => {
useEffect(() => {
let canvas = SVG().addTo('#canvas').size(6006, 600);
canvas....
- 375
0
votes
1
answer
111
views
How to add svg to div when doing conditional rendering?
I have a code that is only rendered after some data is fetched from server and variables are set. When using svg.js, it uses SVG.AddTo("#someID"), but the div containing the ID has not been ...
- 375
0
votes
1
answer
65
views
Using my module both in node.js and in React?
Sorry if my question seems weird, but I am quite new to javascript/nodejs/react, and can't really achieve the following:
I made a module that uses SVG.js to generate SVG-s, and I would like to use it ...
- 491
0
votes
0
answers
35
views
SVG() y coordinate not matching height
when I set viewbox(0,0,100,100) and I then set some text draw.text('Hello Word').y(100) when I console log y its 115.3996229171753 i was expecting 100?
Thanks in advance.
const svg = SVG().addTo("...
- 1,485
0
votes
1
answer
305
views
Using SVG with IDs for subcomponents
I am trying (in javascript) to access parts of a list of SVG components in a little test page, but I am not sure I can achieve what I want this way. The main question is:
Can I have sub-components ...
- 11.9k
0
votes
2
answers
541
views
Drawing a line with negative coordinates in SVG.js
I am trying to scale my SVG down width 0.5 and then draw a line from positive to negative coordinates, but it seems that it renders only to x:0 and y:0.
Does SVG.jsnot support drawing with negative ...
- 136
0
votes
1
answer
439
views
createSVGPoint() and new SVG.Point()
createSVGPoint()i getSVGPoint {x: 0, y: 0}however using svg.js syntax withnew SVG.Point()it consolesot {x: 0, y: 0}`
Using svg.js method im not able to call matrixTransform(svg.getScreenCTM().inverse()...
- 1,485
0
votes
0
answers
282
views
How to configure SVG.js timeline in javascript to animate SVG elements along a timeline
I am trying to get the javascript for animating an svg element along a timeline to work like i used it with SVG.js version 3.0.16 But the only available version that js fiddle has is 3.0.5
My end ...
- 11
0
votes
1
answer
55
views
SVG.js not working in chrome, Firefox works well
I seem to be able to accomplish anything I want in Firefox. But Chrome seems to be mostly broken. For instance svgObj.findOne("#myNode").on("click", function) works in Firefox, but ...
- 474
0
votes
1
answer
1k
views
Why I cannot reach the svg objects using from html object?
Example on the Internet, they can call objects in svg files easily. But i cannot reach them. Here is my html code``
<html lang="en">
<head>
<title>SVG Example</title>
...
- 102
1
vote
1
answer
79
views
how to destory an animation?
I made a scale animation test:
var btn = document.getElementById('testBtn');
var stopBtn = document.getElementById('testStop');
var runner;
var startSize = 20,
endSize = 80;
const start = ...
- 23
-1
votes
2
answers
747
views
How to draw letter R with SVG
I have a svg of letter B here is the code:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<title>Logo</title>
<g transform="...
- 280
1
vote
1
answer
557
views
How to change the start position of svg image using animateMotion?
I am trying to change the start position of an svg image to animate it along a path using animateMotion
You can check the current result here https://jsfiddle.net/7espvwuz/
In this fiddle I am using a ...
- 2,468
0
votes
0
answers
36
views
How to add a style to a <g> within an existing <svg>
I have 3 identical SVGs displaying on my page. But they are placed dynamically (I'm using WordPress, with a plugin that inlines all SVG images). I'm using them to show percentages of different ...
- 221
-1
votes
1
answer
144
views
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 ...
- 107
0
votes
1
answer
45
views
When does animation happen
First attempt at animation in svg.js. Very straightforward, and it works fine standalone. Just animate drawing a line from A to B. Start with a zero length line at A, animate the endpoint to B, ...
1
vote
1
answer
203
views
animations with svg.js - adding runners to timelines
I wish to have animations that are controlled by buttons. My idea is to have a number of timelines which I can play() eg when the correct button is clicked.
I'm new to this library and am confused ...
- 56
0
votes
2
answers
213
views
Adding array of points to polygon
Im trying to programmatically create an SVG polygon with a function by adding to the polygons array using svg.js using the following code:
const draw = SVG().addTo('body').attr({
viewBox: '0 0 100 ...
- 1,485
0
votes
1
answer
81
views
SVGPointList length changes using svg.js
Hi I am using the function createPoint to animate a polygon using gsap. I am also using svg.js
If I use vanilla javascript to get the points of the svg with
var polygon = document.querySelector("...
- 1,485
3
votes
2
answers
6k
views
Is it possible to stroke "transparent" with SVG.js?
I'm using SVG.js and want to draw an invisible border around a shape.
I use the stroke() method to do this, and I thought just setting the opacity option to 0 would work fine, but the problem is that ...
- 41
0
votes
1
answer
223
views
SVG.js move group containing symbol use element
I'm using the SVG.js library in my project and I'm trying to move a group containing some rect, text and one use element in x direction:
// create symbol, symbol can be anything
const symbol = svg....
- 13