All Questions
122
questions
1
vote
1
answer
71
views
Why don't SVG filters take into account the position of the SVG's viewBox, since they do take into account its size?
<svg viewBox="60 0 200 40">
<filter id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="1" />
</filter>
<path d="M 70 5 l 0 10" style="filter: ...
- 11.6k
94
votes
6
answers
79k
views
How to calculate required hue-rotate to generate specific colour?
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
...
- 31.3k
1
vote
0
answers
19
views
Using dropshadow filter on svg path causes it to disappear [duplicate]
<!DOCTYPE html>
<html lang="en">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow" color-interpolation-filters="sRGB"&...
- 3,144
512
votes
8
answers
599k
views
SVG drop shadow using css3
Is it possible to set drop shadow for an svg element using css3, something like
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
I saw some remarks on creating shadow using ...
- 20.3k
8
votes
5
answers
8k
views
SVG filter not showing up in Firefox, working fine in Chrome
I want a piece of dark text on dark background to have a white glow outside of it. Although the default drop shadow filter in CSS (like filter: drop-shadow(2px 2px 2px black)) officially should ...
- 2,983
1
vote
1
answer
390
views
Issue with getting "gooey" CSS SVG filter for rounded text background to work in Firefox
I was attempting to recreate the following rounded background effect found in this Dribble design:
Through some research, I found out that it was called the gooey effect. I tried to implement these [...
2
votes
1
answer
344
views
Svg gradient, override other svg too
basically I have two SVG and If I try to change the color of the second one it doesn't change, If I do to the first one, it change the color of both the SVG.
In the example below, if you duplicate the ...
- 71
2
votes
0
answers
417
views
SVG filter loses colour when the SVG is hidden or external
<svg style="display:none">
<defs>
<filter id="blue-glow-display-none">
<feMorphology in="SourceAlpha" operator="dilate" radius="2" />
<feGaussianBlur ...
- 34.6k
0
votes
1
answer
20
views
HTML SVG texts with different background colors
I have an image and I want to render multiple labels with different background colors:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</...
- 8,863
1
vote
0
answers
481
views
How do I apply shader to SVG Filter?
I tried some WebGL technology before such as three js and pixi js. When I learned WebGL technology, I found shader which made me really fascinated. But WebGL can only be rendered on the canvas not the ...
- 347
0
votes
1
answer
534
views
Some SVG elements disappear when hiding adjacent divs
I have a project where I've created a number of divs which each contain an svg gauge. Each gauge is multi-layered and when displayed, it looks great. Its a complex gauge, so I wont include the code, ...
3
votes
1
answer
2k
views
Inlining SVG filters as data URI
I'm trying to add a SVG filter using a data URI in the CSS but cannot get the effects applied to my image.
It seems that it should be supported as both data URI and SVG filters are supported in all ...
- 12.8k
1
vote
1
answer
148
views
Why does converting my greyscale SVG to alpha cause a reduction in brightness?
I'm trying to create a transparent "starry night" effect with an SVG. I have my SVG inlined on a webpage, inside an element with a black background. I start out with a turbulence filter, ...
- 31.3k
1
vote
0
answers
289
views
SVG Filter animation won't work in Safari
I ran into an issue where safari doesn't want to apply svg filters to a child element that is animated. It seems like an you can animated the parent of an element with a filter applied (second example)...
- 61
0
votes
0
answers
391
views
Remove filter from child element HTML CSS
I am working on a project and and am having an issue trying to remove a filter from a child element. I created a small code snippet of the issue I am running into.
Does anyone have any recommendations ...
