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
14
votes
1
answer
20k
views
How to create a transparency gradient mask using an SVG filter
I am currently using an SVG gradient to apply a fade-out effect for paths. This allows the path to start at 100% opacity at x0 and fade out to 0% at x1, wherever those may be for the particular path ...
- 690
13
votes
2
answers
6k
views
How to change color of SVG pattern on usage?
I would like to change the color of pattern upon usage.
For example, I would like to have a green pattern in the red stroked circle.
<svg width="300" height="300" viewBox="0 0 300 300"
xmlns="...
- 3,642
12
votes
3
answers
7k
views
Using SVG for additive color mixing (additive blending)
Coming from a graphic design background I know how to cheat to create an effect of additive color. The same basic solution is proposed in another post on here.
The post above refers to transparent ....
- 646
12
votes
3
answers
11k
views
Drawing a circle with a dropshadow in SVG clips the edges
I'm trying to draw a simple circle with a drop shadow in SVG, but for some reason the top and left edges are clipped. This happens both in Chrome and Safari.
I'm using code I found in the w3schools ...
- 1,284
12
votes
1
answer
20k
views
How to Invert a White image to Black using SVG Filters?
Is there a way to invert a white image to black using SVG filters?
In CSS Filter, we do -webkit-filter:invert(1); which does not work in IE10. I am applying SVG filters as fallback. Any one can help?
- 3,043
11
votes
1
answer
11k
views
SVG images not rendering in Safari
<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">
<defs>
<pattern id="pattern1" height="100%" width="...
- 861
11
votes
2
answers
6k
views
Apply blur filter to certain area of svg image
I have an quite complex, dynamically created svg image, that has been created using jQuery SVG. I'd like to create a "popup" area that shows on top of all svg elements in the canvas. To create a ...
- 1,142
11
votes
3
answers
10k
views
Can I apply CSS filters ONLY on image sections?
I have a full screen background-image
.bg {
left: 0;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0;
z-index: -1;
}
and want to apply a CSS filter, ...
- 441
11
votes
1
answer
6k
views
Transition an SVG Filter
I'm trying to create a material design like shadow on an SVG circle. I want this shadow to grow with a nice transition when you click on the circle, but at the moment I'm struggling to even figure out ...
- 34.3k
11
votes
2
answers
4k
views
How to use a simple SVG filter on Safari with acceptable performance and without crashing?
Disclaimer: This post is half question and half report of my experiments while trying to find a solution.
The Task: Simple SVG Filter on a Monochrome Rectangle
Using a filter to change or modify the ...
- 3,413
10
votes
3
answers
17k
views
How to apply drop-shadow filter via CSS to SVG specific element/path
I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I don't need the whole graphic to be shadowed, just an element inside it.
.shadow {
fill: ...
- 2,266
10
votes
2
answers
6k
views
Can one pixelate images with an SVG filter?
Note: I can't use JavaScript, because this is for a CSS Zen Garden sort of challenge. Please do not suggest a JS library.
I have 2 ideas that I'm not making headway on:
Use a SVG filter to just ...
- 1,419
10
votes
2
answers
10k
views
what's a flood-color and lighting-color definition in CSS?
Way cool, i'd just realised there is something called flood-color and lighting-color in CSS. Does anyone know what is a flood-color and lighting-color and what do they do?
What exactly do these mean?:...
- 88.5k
9
votes
2
answers
21k
views
SVG: color of the shadow
I want to write a simple rectangle with a red shadow in SVG.
I have a simple filter:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
<title>svg arrow ...
- 865
9
votes
2
answers
7k
views
Dynamically modifying an SVG filter with javascript
I'm trying to create a dynamic blur effect, that can be modified with javascript on the fly.
To start with, I'm using this really simple svg filter:
<svg version="1.1" xmlns="http://www.w3.org/...
- 5,470