Skip to content
Advertisement

Tag: svg

Load SVG into canvas to get base64 dataurl

I have this SVG in my html : the symbol pointed by the “use” tag is : This display correctly when the page load (ie. it is using the symbol that I refer to using use tag). I want to take this SVG and get the base64 dataurl (convert it to an image). I tried to use this code without

Move g element for centering them in a tree layout

I would like move the g element include multiple tspan text to enter. The attribute dx and dy doesn’t work in this example. what’s the proper way to move the g element to make it move to center? Answer For repositioning them dynamically, an easy approach is getting the size of the element and translating it up/left by half its

getBoundingClientRect() returns inaccurate values for complex SVG’s in Chrome

I’m trying to calculate the bounding box of transformed SVG elements and for that I’m using getBoundingClientRect() and mapping the x and y values to SVG coordinates. However, this function seems to produce wrong outputs in Chrome and Edge when the shape has curves and a rotation. In the other hand, Firefox is able to produce the expected result. Here’s

Control the order of visibility of the multiple paths of SVG element

i was searching a way to show an image in html with rounded dashed border like example below such that number of dashes and their individual colors can be controlled, the similar example can be observed in WhatsApp application status tab where number of dashes changes according to the number of statuses uploaded by user. Now to address the problem

Dynamically change the path of an animateMotion SVG element on event

I want to , for a specific event, such as onclick, as a specific SVG element, change that SVG’s animateMotion element and play that animation again. My current code does replay the animation correctly, but does not change the path attribute Clicking multiple times plays the animation multiple times, yet path does not change. The specific goal of this is

SVG to Image returning blank image blob

I have an interactive drawing app on my website, and I want to create a button where one could share their drawing on FB. I’m trying to convert the SVG element to a blob, to then pass it to og:image, but I’m having some issues with the conversion. I have two trials: one doesn’t trigger the onload function for some

JavaScript SVGLine connecting moving elements animation

I have two SVG rectangles; two of their corners are connected by a SVGLine, and I am trying to animate the whole. Now the rectangles are moving to a new position using the Element.animate() function (the new positions have to be computed at runtime so I think it is only possible with the animate() function in JS?). Until that point

How to prevent dragging of an element inside a ?

I am building an editor that uses an SVG element as the canvas. It provides custom drag-and-drop behavior to drag elements inside the svg around. However, when I try to drag an <image> tag, the native browser drag behavior where you’re dragging a “ghost” of the image kicks in. How do I stop it? I tried setting user-select: none in

how can i curve to progress bar in css

I would like to create a progress bar like this curve progress . But i don’t know how to make it. I created this one straight progress bar and here is my css code how can i curve to a progress bar ? is it possible or do i have to try an another tag? Answer My suggestion would be

Advertisement