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 same happens in the opposite

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: However, hovering the

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 a factor 0.8660254 of the width), will

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 in the scan handler I

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 you need it

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 I’m not able to get this ID. My