Skip to main content

All Questions

Tagged with
1 vote
1 answer
415 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 ...
1 vote
1 answer
78 views

Can't properly change image's color using svg filter

I have this image And I need to make it look this way (at least, I need to fill the t-shirt fully) And I've got this: With this code: img { filter: url('#grayscale'); } body { background:#...
2 votes
2 answers
2k views

Apply noise to image with transparency by use of SVG filters

I'm trying to apply a noise effect to an image, however, I struggle to maintain the transparency. Here's a fiddle to illustrate: https://jsfiddle.net/t1aeyqfu/ #noisy { filter: url(#noise); } #...
5 votes
3 answers
953 views

Is there a way to rotate feImage or feTile pattern in an SVG?

In this example, I set up a filter that textures the given element with a checkboard pattern using SVG filter effects: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" ...
2 votes
1 answer
1k views

edge detection in svg filter

I am trying to find the edge points of the image by using the SVG filter.The problem is not getting succeed with this.Below is the code that what I have tried. <svg width="100%" height="495"&...
0 votes
1 answer
73 views

softening colors in a matrix svg filter for images

I need to use an image filter that soften red at 90%, green at 80% and blue at 70%. For example, I need to transform rgb(255,255,255) to rgb(229,204,178) (229=90%*255, 204=80%*255, 178=70%*255)...
0 votes
1 answer
611 views

SVG path with image filter but transparent background

I have a path with an image which is added through a filter. Also the path has a background colour set like this: myPath.css('fill', bgColour); My question is how it is possible to have the path ...
0 votes
1 answer
50 views

Avoid image translation + scale for path background

For a SVG path I am combining a background filling with a filter containing an image which may be scaled and translated. Here is the full code for a function which cares for amending a list of pathes ...
2 votes
1 answer
60 views

Apply combination of background colour and image filter to a svg path

I have a svg path where I apply both a background colour as well as a filter containing a (possible scaled and translated) image. First the background colour is applied using the css fill property: ...
4 votes
2 answers
3k views

Using SVG filters in CSS for IE10

IE10 has dropped support for its DirectX image manipulations; it now uses the SVG standards. However, in Firefox, for example, you can apply an svg filter to any <img> element but in IE10, and I ...
0 votes
1 answer
2k views

css hover filter not working in ie

Hi I have a problem I haven't been able to solve. I want my thumbnails displayed as grayscale and then in color on hover. The original image is color. It works in Chrome and FF. It will not work in IE....
0 votes
3 answers
584 views

SVG color-shadow filter fails when built with JavaScript

I created a drop-shadow for an SVG image, which works fine using pure SVG (see a live demo): <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" ...
2 votes
2 answers
369 views

Have an SVG element using 2 filter

I have an SVGimage element and I want that image to have a shadow using feOffset, feGaussianBlur, etc. and at the same time, I need to set the image's brightness and contrast, I tried the following ...
3 votes
3 answers
1k views

Colorizing grayscale image

I'm trying to colorize grayscale images on the fly with user-selected foreground and background colors (limited to red, green, blue, cyan, magenta, yellow, black, and white). The effect I want is as ...
3 votes
2 answers
6k views

Brightness filter in firefox and opera without svg file

For my current project i used filter -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); But somewhy, this filter doesnt works in firefox and opera(i have opera prefix too). I found,...