Skip to main content

All Questions

Tagged with
0 votes
1 answer
164 views

SVG pulse animation on IE/Edge

I have pulse animation on svg circles, but transform: scale for circles doesn't work on IE/Edge. Works great on other browsers. Is there any way to fix this issue without any jquery plugins? .cls-1, ...
-1 votes
1 answer
45 views

How to change CSS color of data:image/svg+xml element?

I have the following CSS rule: .btn-info, .btn-primary, .btn-success, .uk-button-primary { background-color: transparent; color: #fff; border: 10px solid #f6a000; border-image-...
1 vote
4 answers
2k views

How to make checkbox show/hide SVG-Content

i have rectangles and lines in SVG together with a checkbox. I want somehow to make a checked checkbox to show the content and when its checked, otherwise not. So for example: When the checkbox for &...
0 votes
2 answers
79 views

how to modify the slope in svg shape

I have created one svg shape. I want the slope to start from middle. I tried,but I don't know how to make it. Can anyone please help me. <svg xmlns="http://www.w3.org/2000/svg" fill="none"> ...
0 votes
0 answers
23 views

react-svg library and styles are not applied

I have used the "react-svg" library to display SVG icons because I wanted to enter the address of the icon directly, but the problem is that I cannot implement my styles on the icon, like I ...
-1 votes
0 answers
17 views

Can you use :host() or similar in <img /> for styling an svg? [duplicate]

I am trying to style an SVG within an img tag. I am not templating the svg into the HTML to allow for reusing the cached image between pages and avoid sending unnecessary bytes. When templating the ...
-1 votes
1 answer
32 views

How to add a Blur Filter to SVG Element in CSS [closed]

I'm trying to add a blur effect to an SVG element. I attempted using within the SVG but changing the values of stdDeviation doesn't seem to produce any changes. How can I properly apply a blur filter ...
12 votes
3 answers
10k views

currentColor inheritance for SVG url

Same question as How do I have an SVG image inherit colors from the HTML document?, but specifically when applied to an svg image used as content on a :before pseudo-element. (Desired behavior is ...
6 votes
1 answer
1k views

context-stroke and context-fill for markers in SVGs on Chrome don't work, alternatives?

I am working on generating some SVGs for a report and have to draw lines of different colors with matching markers for start and end. In Firefox it appears they fixed this issue 14 days ago, but ...
0 votes
1 answer
26 views

I'm trying to style my icons that are dynamicaly imported from another file.js on my react app im using react-icons

my icons are imported and stored on a separate file.js i imported the file.js on my .jsx file & i can see the svgs being rendered on my website i also can change the size but the color remains ...
0 votes
0 answers
32 views

How to make svg and its path the exact same dimensions? [duplicate]

I have an issue with lots of my svgs where the container is bigger than the actual content. See gif below where I flick between hovering over svg and path in the Chrome inspector. As you can see the ...
32 votes
7 answers
60k views

How to create circular progress(pie chart) like indicator

I have to show progress graphs exactly in following way where percentage would be in center of circular graph How can i do this using javascript/jQuery? Can it be done using Google Chart?
0 votes
0 answers
609 views

How to use an SVG to make a hole in a <View /> (React Native)

I have the following shape in a React Native app. and I want to shape it like you see here Problem: This isn't responsive, if I use an SVG it stretches and shrinks the whole thing, including the ...
11 votes
1 answer
10k views

How to use an SVG as the cursor

Im trying to use an SVG image as the cursor when hovering over a certain div, but I can't get it to work. I've read that it should be as simple as adding this: cursor: url(http://elusivethemes.com/...
0 votes
0 answers
53 views

What is the explanation for nested svg behavior?

<svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red"> <svg width="50px" height="80px" style="outline: 1px solid green" > <circle cx="25" ...

15 30 50 per page
1
2 3 4 5
808