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
Tag: svg
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
Why when I import a svg icon, only the pathname string is rendered, and not the actual svg icon?
I have a folder called icons inside assets folder, and inside icons, I have folders for different sizes, inside each one, I have a bunch of svg files, each containing a svg icon. I created an index.js file inside icons folder, and then from it, I imported a svg file, and then export it, but when I import it from
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 https://react-svgr.com/playground/?native=true&typescript=true 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
SVG pixelate when using with canvas in full window height and width for all devices
I’m using Jspain library in this project. https://faisalsamroz.com/colorway15/ I drawed SVG image on canvas but it’s pixelating even it shows white dots when you fill up black color. Screenshot attached. Please help if someone else faced the same problem. Answer When an SVG is rendered to a bitmap – such as a canvas – antialiasing is used to make the
How do I get a style property value from an SVG element that is animated using transform?
If I have an SVG element that is animated using transform, either using SMIL or CSS, how do I get the computed style of the property that is animated? Here I have a <rect> that rotates, but as you can see the rotate property just returns none: Answer In the case of a SMIL animation just read off the SMIL