Skip to content

Tag: svg

SVG stroke animation not working in Safari

My JS code goes over each path, and adds a stroke-dasharray and stroke-dashoffset according to path length: Then, My CSS just animates the dashoffset to 0, while lowering the stroke opacity and raising the fill opacity: This works perfectly in Chrome – the animation shows the paths being drawn, but in Safari, the paths just show up without any animation.

Best way to include reusable SVG in React

I am including SVG as reusable component on my react application. Sample of SVG component is as follows On page level, I am importing IconComponent and reusing it. Is there any other best way to include reusable SVGs in React pages which improves performance/page load? Answer 1. SVG with webpack command line webpack.config.js then 2. SVG as component also you

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

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

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

Can’t append simple svg to body element

I know this is a super easy question. But I am apparently missing something super obvious. I just want to create an svg element with D3 and see it on my page. My index.htmllooks like this: Whereas my selections.js looks like this: The first console.log() is still visible in the console. But I cant see the svg. I know I