I have this SVG code in my HTML that renders a triangle with a shadow below it:
<svg class="svg-triangle">
<defs>
<filter id="shadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="-1" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2,5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<polygon points="0,0 22,0 11,7" filter="url(#shadow)"/>
</svg>
That code works fine on Chrome and Firefox, but that's what happens when it get rendered on Internet Explorer 11, the gaussian blur stdDeviation value becomes:
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1.65726e+009" />
And the shadow is obviously not showed
Any ideas on why this is happening?
Thank you
Related
I'm using an svg for my navbar but somehow svg fill color is not showing in firefox or some of the mobile phone?
Here is my svg code:
<svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#ffffff"/>
<path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/>
</g>
<defs>
<filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
</defs>
</svg>
Here is what I want :
I want my svg background color black something like this
But when I open this in Iphone or firefox browser it is showing my background color white?
Here is the image how it is showing in Iphone or firefox
Someone help me out with this issue
Thank You
Hope this will work ..
div{width:600px; height:600px; background: white}
<div><svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#000000"/>
<path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/>
</g>
<defs>
<filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
</defs>
</svg>
</div>
I have such a picture for the background. It should be made normal and put in background
<svg class="iphone-background__img" viewBox="0 0 991 828" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_479_2171)">
<path d="M726.689 447.055C636.6 301.175 399.748 283.135 292.584 292.35C204.911 229.864 267.12 198.986 369.452 84.6792C471.785 -29.6278 716.462 36.8959 857.979 37.8365C999.495 38.777 1120.33 339.695 1101.17 471.585C1082.02 603.476 839.301 629.405 726.689 447.055Z" fill="#FA00FF" fill-opacity="0.2" />
</g>
<defs>
<filter id="filter0_f_479_2171" x="0.806396" y="-232.258" width="1352.37" height="1059.42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_479_2171" />
</filter>
</defs>
</svg>
I have a very simple SVG filter that produces totally different results in Chrome vs. Safari or Firefox (on Mac OS). The problem seems to center around using feComposite on an offset alpha channel. Here's my code:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
<defs>
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feOffset dx="0" dy="0.1" in="SourceAlpha" out="offset-text" />
<feComposite operator="in" in="red-fill" in2="offset-text" result="final" />
</filter>
</defs>
<text font-size="1px" filter="url(#foo)">1</text>
</svg>
In Chrome I see a large red digit "1", while Safari and Firefox show only a blank white canvas. If I remove the <feOffset> and use SourceAlpha directly for compositing, like so:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
<defs>
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feComposite operator="in" in="red-fill" in2="SourceAlpha" result="final" />
</filter>
</defs>
<text font-size="1px" filter="url(#foo)">1</text>
</svg>
...then I see the red digit "1" in all three browsers, as expected.
Why couldn't I use the <feOffset> output in <feComposite>, and is there a recommended alternative?
This is a simple fix. That "out=" should be a "result=" in your filter. (And your font-size needs to be in a style declaration (Chrome is more forgiving of bad syntax.))
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2" >
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feOffset dx="0" dy="0.1" in="SourceAlpha" result="offset-text" />
<feComposite operator="in" in="red-fill" in2="offset-text" result="final"
/>
</filter>
</defs>
<text filter="url(#foo)" style="font-size:1px" >1</text>
</svg>
I need to make a shadow for rect element for svg. The snippet below does the job, but I don't know how to control the color/opacity of the shadow? Any help will be appreciated!
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
Came across this w3schools page with similar examples. Based on the examples given there, it looks like you need to add few more filters (like feColorMatrix and feGaussianBlur) to bring the desired effect.
Your code with new filters:
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
You can use this jsfiddle also.
Update:
We can achieve opacity & color change just with feColorMatrix filter. Check this updated jsFiddle.
But, in order achieve the desired color you need to understand more about setting values attribute of feColorMatrix.
Following links may be helpful:
Match colors in feColorMatrix filter
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
SVG Drop Shadow - opacity, feOffset and viewBox difficulties
I am trying to make a drop shadow for the following SVG shape:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4"/>
</svg>
After the drop shadow the shape is suppossed to look like this (ignore the bits except for the arrow and its shadow):
I tried the following SVG:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
<filter id="f1" x="0" y="0" width="500%" height="500%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>
http://fiddle.jshell.net/md3rT/
What I get is this:
The resulting SVG is coming out truncated.
Also, how can I change the opacity of the shadow?
Thanx in advance!
To stop truncating, just make the filter cover the shape (the drop shadow is above and to the left so the filter needs to cover that region).
<filter id="f1" x="-180%" y="-500%" width="500%" height="1000%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
If you want the shadow not to be opaque, something involving a non-opaque flood would seem to do the trick. For a general drop shadow you need something like this...
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/>
<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/>
<feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="in-of-feDropShadow"/>
</feMerge>
Although, in Firefox and Chrome you can use the SVG Filter Effects <feDropShadow> filter or a CSS drop-shadow filter instead.
This is what I think you're looking for. It expands the filter region, keeps the drop shadow unblurred and dials the opacity on the shadow down to 50%. (I've also found browsers to get crotchety when you don't provide explicit dimensions for inline SVG.)
<svg x="0px" y="0px" width="500px" height="300px" style="overflow:visible;" viewBox="0 0 500 300">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
<filter id="f1" x="-50%" y="-100%" width="200%" height="400%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 .5"/>
</feComponentTransfer>
<feComposite operator="over" in="SourceGraphic"/>
</filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>