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: ...
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
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 [...
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>
</...
- 717
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, ...
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 ...
- 822
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, ...
- 29.2k
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 ...
1
vote
1
answer
357
views
SVG Shape Lighting
Summary: I'm trying to create a canvas of randomized rock climbing holds using vector graphics generated with properties such as color, rotation, size and path values.
To add depth to these I'm trying ...
- 59
1
vote
1
answer
135
views
Improve neon sharped cut text effect
I am trying to add sharped cut effect on text. I have achieved this thing:
But I want to achieve this backplate/background sharped cut text effect:
My Code:
.wrapper {
background-color: #000;
}...
- 126
2
votes
1
answer
752
views
SVG filter "Turbulence" not rendering well on safari
I'm trying to apply a svg "Turbulence" filter on an image on my website.
The thing is that it looks well on FireFox and Chrome :
But looks horrible on safari :
It seems that Safari is &...
0
votes
2
answers
136
views
How to add spread in inner shadow in svg?
I have svg rectangle, and I need to add an inset-shadow with spread, how it works in figma.
rectangle with inner-shadow with spread
Currently, I make a rectangle with blur and x, y position, but I ...
- 1
1
vote
1
answer
267
views
Why isn't this feDisplacementMap filter working?
I'm trying to build an image within an SVG <defs> element for use in the in2 attribute of a displacement map filter. However, the displacement map filter isn't warping the element it's applied ...
- 7,617
0
votes
1
answer
41
views
Why is this SVG image not appearing in my website?
Below is the icon that I am using, it appears as an empty space:
const giftIcon = `<svg width="25" height="24" viewBox="0 0 25 24">
<defs>
...
- 321
2
votes
1
answer
377
views
SVG Filter using feImage as input to feDisplacementMap [closed]
I am trying to use svg filters to add a displacement map to an image. This is my code:
<svg width="300" height="300">
<filter id="a" filterUnits="...
- 61
2
votes
0
answers
770
views
CSS filter:url(#inlinesvg), How to change filter property value per instance?
I want to apply a svg filter to different elements, but for the different elements I want to adjust the value of a certain property. Is there a way to pass a variable for each instance?
I know I can ...
- 37
1
vote
1
answer
425
views
does the filter in image tag under svg reduce the quality of the image?
I have an <image /> under <svg> componenent. If I add the filter property to the image which increases/reduces contrast and brightness, does this effect the quality (pixel density) of the ...
- 37
2
votes
1
answer
135
views
Hi guys, I need to deal with shadows in svg
This is a map of one area from Kazakhstan I need that when hovering, shadows appear at each city/element as in this picture:
enter image description here
Here is actually the SVG code itself:
CodePen ...
2
votes
0
answers
879
views
Filter URL specified in CSS (but SVG is in HTML doc) not working in Safari
The effect uses an SVG/Filter which is in the HTML document. It is then specified in an external CSS document using filter:url('#noise') contrast(110%);.
The effect works in Chrome/Firefox (all I've ...
- 1,545
0
votes
1
answer
82
views
Inset shadows on svg are just acting as an outline
I'm trying to add some inset shadows to my svg, to make it look more like this
Instead of like this
I tried adding an inset shadow to every path (filter="url(#inset-shadow)"), using the ...
- 2,070
2
votes
2
answers
830
views
SVG: Showing average color for overlapping shapes
This is different from Using SVG for additive color mixing (additive blending), which is talking specifically about additive blending. For that it's as easy as setting mix-blend-mode: screen. As far ...
- 177
1
vote
1
answer
377
views
Using a filter to add highlight-color glow to SVG?
I'm developing a SVG sketchpad and I would very much like to show an outline around the selected SVG object. I have the following already:
<svg width="0" height="0">
<...
- 75
0
votes
0
answers
32
views
Using SVG *and* CSS Filters to Edit and Download an Image [duplicate]
This question was closed inappropriately. I stated in my question that I know how to download an image edited with CSS. Yet I was referred to 4 pages that explain how to download an image with CSS. ...
- 67
4
votes
2
answers
1k
views
Why svg blur dosen't work in html or browser?
I'm using Figma editor and I tried to blur element, in the editor everything looks fine, then I export it into SVG. I see that there are tags that should make my element blur <feGaussianBlur in=&...
- 914
2
votes
1
answer
3k
views
How to improve svg blur performance (in safari)?
I'm using feGaussianBlur on multiple spinning slotmachine reels to blur images. As the weels speed up, the stdDeviation is increased accordingly. This results in a very high CPU usage and laggs in the ...
- 21
0
votes
0
answers
40
views
Change a part of a SVG color on hover loaded using image tag
I have a SVG image which has a background circle and an arrow and I use it in my application like this:
<def>
//few other svgs with image tag will be loaded here
<image id="...
- 225
1
vote
0
answers
1k
views
Blink-engine SVG rendering Bug in feGaussianBlur filter by stdDeviation small value (under 0.8). Seeking Workaround
All browsers (Chrome, Opera, MS Edge, ...) based on Blink-engine have SVG rendering bug in feGaussianBlur filter by stdDeviation small values – less then 0.8
The blurring effect works in this browsers ...
- 14k
3
votes
2
answers
698
views
SVG Filter: width 100% height 100% does not cover image
I have a simple SVG Filter. If you click the example below, that filter will appear/disappear:
var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?...
- 27k
0
votes
1
answer
251
views
Apply Glow Effect Filter to Anchor Tag with Transparent Path Child SVG
I would like to create an image map by using an SVG to create the clickpoints. I have been asked to add a glow to the anchor on hover, which I'm currently doing by applying a filter to the anchor tag ...
- 2,505
3
votes
1
answer
542
views
Why is <feDropShadow> not displaying?
Edit: trying to create a mcve I wasn't able to repro the issue. Now I'm completely baffled. Works on codesandbox, not in my project.
Initial question
I want to create a dynamic inline SVG element and ...
- 87.7k
0
votes
0
answers
253
views
Zoom blur effect in CSS or Javascript on text
I am wondering, if I can make something like a zoom blur effect in CSS thru custom filter. I want something like this: https://pixijs.io/pixi-filters/docs/PIXI.filters.ZoomBlurFilter.html. But I would ...
2
votes
0
answers
1k
views
How can I performance optimise this SVG animation?
I am working on a SVG animation, here is a Code Pen to check it out. It is using a combination of SVG Filters, SVG Masks and Path Animations.
The issue I am having is that I am struggling to get it ...
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
1
vote
1
answer
783
views
Problem with SVG Filters to make a specific color transparent in an image
I found a svg filter with multiple filter-effects to make a specific color in an image transparent.
I created an image with two colors Red and Black and I am making the black
color transparent.
The ...
- 317
3
votes
2
answers
502
views
Animate feDropShadow inside filter
I have the following code and I want to animate feDropShadow inside defs
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
*,
*::before,
*::after {
...
1
vote
1
answer
334
views
is there any way to give multiple value in duration svg animation tag?
i am trying to perform some animation operation on svg but i am not able to get the outcome i want is there any way to add morethen one value on
<animate attributeType="CSS" attributeName="...
- 415
3
votes
1
answer
1k
views
SVG light and shadow a 3D feelling
I want to make an svg looks like it's on 3D by adding a small light in the top and left BORDER and a shadow in the bottom and right BORDER
something like this
#div1 {
background: #ddd;
}
#...
- 4,750
1
vote
1
answer
652
views
Add filter only to <image/> inside SVG, but not to the entire SVG
I have small problem with styling SVG and image inside. In SVG I have two filters. First effect (#innershadow) is to whole SVG object, second I want to apply only to image inside, because wave (#...
- 91
2
votes
1
answer
820
views
SVG filter is not changing the fill color
I have a svg image which shows a little logo I`m using on a website.
This svg has three paths and in two of them i want to change the fill color to a little darker one.
:root {
--websiteColor: ...
- 141
3
votes
0
answers
921
views
SVG Filter Displacement as Overlay on Entire Website
I have a project where I want to achieve a glass effect through a lens, running over the entire site. I tried with PixiJS, but it only works on the canvas. It's important that the filter is on every ...
- 31
0
votes
0
answers
95
views
how do I prevent the feComposite arithmetic svgfilters changing output channel values despite having 0 in the corresponding input channel
When adding an svg box of color value #800000 to an svg box with color value #008000 I find the result is not #808000.
The result turns out to be color #898500.
<feComposite in="b1" in2="b2" ...
- 57
2
votes
1
answer
819
views
Masking SVG-filter, not simply combining mask and filter
I am attempting to apply fractalNoise filter to HTML element. However, I dont want the whole element to be affected but to have the filter gradually increase from bottom to top.
In order to achieve ...
- 179
1
vote
1
answer
631
views
SVG is fully invisible in Firefox
Before this gets marked as a duplicate: we've already ensured the width and height are properly set. I'm phrasing it as invisible because although it takes up the correct space and is even loaded in ...
- 972
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 ...
- 323k
1
vote
1
answer
118
views
Reveal image on hovered SVG element
Here I've received an answer how to rewrite the skewed div fully with svg. Works perfectly. But I need a special effect, once the skewed div is hovered - reveal the image.
Here is a demonstration ...
- 711
1
vote
1
answer
390
views
SVG - Center image in circle without image fill
I have created a circle in SVG and trying to display image in circle and when the circle size is increased the image is also increasing but I wanted to have image same as it is, changing the circle ...
- 3,163
6
votes
1
answer
865
views
SVG filter with variable?
I have an SVG glow filter implemented like so:
<filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur ...
- 323k
1
vote
1
answer
362
views
Composite of two filtered SVG files
I am trying to implement a visual 'diff' strategy for printed circuit boards. The intent is to highlight 'new' additions in blue and old parts of the design (removed) in red. I have two b&w svg ...
- 53