All Questions
Tagged with svg svg-filters
574
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
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
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
0
votes
0
answers
141
views
How to make a moving turbulence filter with SVG feturbulence?
As the question says, is there a way to do that? For example, I can make a infinite moving linear gradient:
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%&...
1
vote
1
answer
387
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 [...
0
votes
0
answers
49
views
SVG filter base frequency attribute animates well on desktop but not on mobile
I'm using react and gsap. I have 3 elements that are animating using gsap out of which 2 are svg filter attr. This works amazingly on desktop where the values change nicely and smoothly. On mobile ...
- 521