Questions tagged [svg-filters]
SVG filters are a set of image processing primitives that can be combined together to create sophisticated visual effects.
svg-filters
648
questions
-1
votes
1
answer
30
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 ...
- 1,161
93
votes
6
answers
78k
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
0
votes
1
answer
31
views
How to apply filters to shapes multiple times in SVG?
I am trying to apply multiple operations to shapes. (Eventually, my end goal is to blur 2 different shapes using a different color matrix and then blend them together. This is only a reproducible ...
- 31.3k
20
votes
4
answers
11k
views
Multiple Filters for Single Object in SVG
I want to put two filters on my circle. (Maybe more)
I've tried doing:
filter="url(#f1);url(#f2)"
And:
filter="url(#f1,#f2)"
And:
filter="url(#f1 #f2)"
But none of them work. How can I approach ...
- 1,187
0
votes
2
answers
44
views
SVG feTurbulence too transparent output
I have a feTurbulence filter generating clouds in SVG format. I can't adjust the opacity to be less transparent. The clouds are against a blue sky and some white stars. Through the clouds, the stars ...
- 11
0
votes
1
answer
42
views
How to merge SVG masks?
I'm trying to "merge" two masks in SVG and apply them in a way that the white part of both masks is visible in the shape I apply it to.
I read that the solution might be feComposite, but I ...
- 11.5k
37
votes
4
answers
18k
views
How to lower the opacity of the alpha layer in an svg filter?
I'm trying to create a logo as an SVG. I exported the file from Illustrator. The logo has a drop shadow on it. I was looking through the XML and I found the filter node
<filter filterUnits="...
- 24.9k
0
votes
1
answer
65
views
Get rounded corner while using a border created with clip-path
I am trying to create the following shape (https://i.sstatic.net/cZmav.png
right now i am using a clip-path to create the border, because of the corner in the bottom-right. however i am having a ...
- 1,257
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,134
510
votes
8
answers
597k
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
41
views
svg filter compositing with partial transparency
I'm trying to composite one shape onto another. The top layer is a set of strokes that have opacity. The bottom is just a flood fill.
The issue is that I need the strokes to retain their original ...
- 31.3k
0
votes
2
answers
56
views
How can I transform an SVG path without transforming applied gradient/filter?
Given some simple SVG like:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1=&...
- 11.5k
1
vote
1
answer
60
views
How to get rid of extraneous <feFlood/> in filter
I'm using filters with my rounded rects and notice that the paints the whole sub-region and I can't figure out how to remove it so that all I have is a rounded rect of a different color based on my ...
- 21.3k
8
votes
4
answers
9k
views
Using SVG filter to create an inside stroke
I would like to simulate and "inside stroke" on an svg path.
I have an svg map with multiple complex paths (countries) each with a different fill color stroke.
And i would like to add a "fake inside ...
- 10.8k