Skip to content
Advertisement

Tag: svg

How can I fill the inside of a SVG?

I am trying to fill a heart shape SVG on click using html, css and javascript, but it doesn’t seem to work. Here is the svg code : I have tried multiple solutions, such as using “fill” in CSS which only fills the stroke around the svg, but also removing everything in the path from the second M which only

How can I use SVG in React Native?

I am trying to use bootstrap icons in react native and I can’t find any useful methods on how to render an SVG in react-native. Does anyone know how to? Answer To Add SVGs in react native you can use react-native-svg Install: yarn add react-native-svg Example: Or you want to import an svg to your app use: react-native-svg-transformer Example: But

How to make to drawing a SVG with D3.js?

I’m trying to draw a map in an SVG with the GEOJSON data that I bring from this API, the SVG paths are filled with the data, however, the SVG is blank, as can be seen when executing the code below. Notice the document.write, the data is returned correctly. I tested it with another GEOJSON file, and managed to draw

Integrate interactive map with React

I want to have an interactive map in an idlegame where you can click on a tile (See screenshot) and something should happen. I am trying to do so with an SVG and paths around the tile. Please tell me if there is a better way to implement something like this. To my problem: I have finally got my Map-Component

Hyperlink does not work in HTML code that connected with JS code

I’m creating an interactive map for office locations to make it easier for clients to reach out to the nearest office. I use HTML file, CSS file, and JS file together for this map. Everything works fine except when your point out a location on the map, information about the nearest office should popup on the right side of the

Changing the attribute cx and cy when screen resize in D3.js with React

I have a problem with the dynamic change of cx and cy attributes depending on the size of window.innerHeight/window.innerWidth. I am sending to component window.innerHeight/window.innerWidth as hight/width and it look like this: this is bubble-chart-svg css class: When I add console.log(xScale(4)) in I get information about the new position cx (after resize) but circle element in svg does not change.

Fill D3 arrow with colors

I managed to plot an arrow with D3 that changes direction and size dynamically. Now, I would like to fill the encapsulated area with a color. However, I plot the arrow outline with a succession of lines, so I am not sure how to tell D3 that this area is closed and ready to fill? How shall I adjust my

Drawing using SVG icon path [closed]

Closed. This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 2 years ago. Improve this question I am new to SVGs. I wanna make an icon like the below image. How can I achieve this with svg path? Icon image Answer

Creating an image from an svg is not working

I have been trying to create an image (using the window.Image class) out of an DataURL. This DataURL contains a svg tag and a foreignObject. But it just stays completely empty. I also tried to draw this image on a canvas, but I don’t think that’s the problem since I can’t even get a correctly looking image. Finished DataURL The

Advertisement