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
649
questions
1
vote
1
answer
70
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: ...
-1
votes
0
answers
15
views
Svg filters - Change color of image with feColorMatrix [duplicate]
I have created a t-shirt color editor/changer using SVG feColorMatrix & Javacript, the issue i am facing is when i set black color it becomes a flat image.
You can see the progress on CodePen:
...
- 23
0
votes
1
answer
32
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 ...
- 3,575
0
votes
1
answer
50
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 ...
- 3
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
73
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 ...
- 21
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
1
vote
1
answer
45
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 ...
- 283
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=&...
- 18.6k
1
vote
1
answer
63
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 ...
- 283
1
vote
1
answer
75
views
preserveAspectRatio doesn't seem to work in feImage
I am trying to get the same effect as when using background-size: cover in CSS, but by using SVG filters - feImage in particular.
div {
width: 10em;
aspect-ratio: 1;
background: gold
}
.svg ...
- 36.7k
0
votes
0
answers
34
views
Replace one - and only one - color in a svg drawable
I have my brand logo as an svg drawable, and it consists of one text and a graphic at its right. The svg has only two colors, one solid for the text, the other solid color for the image at a side.
...
- 2,588
0
votes
1
answer
54
views
SVG feDiffuseLighting in Chrome vs Firefox
Greeting.
I faced wierd problem
I've got next.js project (default config) with svg filter
<svg xmlns="http://www.w3.org/2000/svg">
<filter id='roughpaper'>
<...
2
votes
1
answer
96
views
Filter effect is spilling out
Consider a div with some bumped up text and a filter. The filter is restricted to 100%×100% of the objectBoundingBox.
However, when we apply a feFlood, we can see how this spills outside the element's ...
- 36.7k
0
votes
2
answers
109
views
Is there way to combine two SVGs with opacity and only show one SVG when they overlap?
I want to fill the gap in the round-arrow line, and the round-arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like ...
- 125