svg-filters

is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

you could use a gradient with stop-opacity to do this. you would add two “middle” stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need. <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”200″ height=”200″> <linearGradient id=”lg” x1=”0.5″ y1=”1″ x2=”0.5″ y2=”0″> <stop offset=”0%” stop-opacity=”1″ stop-color=”royalblue”/> <stop offset=”40%” stop-opacity=”1″ stop-color=”royalblue”/> … Read more

Why doesn’t hue rotation by +180deg and -180deg yield the original color?

In both CSS and SVG filters, there is no conversion into HSV or HSL – the hueRotation shorthands are using a linear matrix approximation in RGB space to perform the hue rotation. This doesn’t conserve saturation or brightness very well for small rotations and highly saturated colors – as you’re seeing. A true hue rotation, … Read more

SVG shadow cut off

You need to increase the size of the filter region. <filter id=”SVGID_0″ y=”-40%” height=”180%”> works just fine. The silent defaults for the filter region are: x=”-10%” y=”-10%” width=”120%” height=”120%” – large blurs usually get clipped. (Your shadow isn’t getting clipped horizontally because your width is about 2.5x your height – so that 10% results in … Read more

SVG drop shadow using css3

Use the new CSS filter property. Supported by webkit browsers, Firefox 34+ and Edge. You can use this polyfill that will support FF < 34, IE6+. You would use it like so: /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ .shadow { -webkit-filter: drop-shadow( 3px 3px 2px … Read more