Skip to content

Tag: svg

Return line segment instead of SVG icon

I have created a SVG icon. But when I click on it. It has chances that the return object is the line segement of the SVG reather than the svg element. Here is the UI: Here is the evidence: The clicked target is a POLYGON in the svg… How can this happen? Answer If you are trying to access the

Ramp in and out SVG turbulence filter

I’m working on a non-linear menu and I’d like it to have a nice animation when hovering over the options. I managed to put together a turbulence svg filter that I like. Now I’m wondering how to make it so that when one hovers over the option the turbulence ramps up progresively, and that the…

SVG overlapping shapes with Recharts

I am using Recharts to create a simple pie chart. My issue likely stems from the fact the entire thing is SVG-based. I would like to have a selected pie slice change color (both fill and stroke). So I do the following: Then render with: And unfortunately, on hovering the First Slice, what I see is this: Howev…

Calculate width of hexagons in a field

I am drawing a hexagonal grid using javascript and svg. The grid needs to have a fixed width (let’s say, of 1000px). The dimensions of the grid can differ, but I have that information (the columns and rows). I have written a function that given a hexagons ‘bounding box’ width (the height is …

How to fit svg path into svg viewbox in React Native

I am trying to implement barcode scanner viewFinder and I want to use svg icon to make it look nice, but I have a problem with forcing the path element inside the svg to take up the full svg width and height. I am using react native and to generate icon i use SVGR https://react-svgr.com/playground/?native=tru…

updating SVG animateMotion path using JavaScript

I try changing an SVG motion path according to a html select value using JS. The path updates as expected, but the element, which uses the path as a motion path continues to move along the original path. What am I missing? Answer As Danny mentioned in his answer the mpath is using the untransformed path. If y…

How can I get an ID from SVG file using javascript

I’m having difficulties in accessing an ID that is inside an SVG file and inside of a rect tag, to manipulate the SVG’s I’m using the Snap.svg library. In this case I want to get the get the id=”rect252″ in javacript file and change the visibility of this object. For some reason …