svg-filters

问题 I'm trying to get a gooey effect with svg. Things are fine in chrome, but look weird on Safari & iOS. Here is the example: https://codepen.io/rubenhak/project/editor/ZoBENL How it looks on Chrome: How it looks on Safari/iOS: The problem is when the one circle is too far, too small or missing, the other circle gets bulged. None of this is an issue on chrome. Code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200" width="500"

问题 The SVG below contains a rectangle with a blur filter and a circular mask applied. The result is a red circle, so obviously the filter is applied before the mask. This seems to be the same on all browsers. <svg width="300" height="300"> <defs> <filter id="f1"> <feGaussianBlur stdDeviation="10" /> </filter> <mask id="m1"> <circle cx="150" cy="150" r="50" fill="#fff"/> </mask> </defs> <rect x="50" y="50" width="200" height="200" fill="red" mask="url(#m1)" filter="url(#f1)"/> </svg> My question

问题 The SVG below contains a rectangle with a blur filter and a circular mask applied. The result is a red circle, so obviously the filter is applied before the mask. This seems to be the same on all browsers. <svg width="300" height="300"> <defs> <filter id="f1"> <feGaussianBlur stdDeviation="10" /> </filter> <mask id="m1"> <circle cx="150" cy="150" r="50" fill="#fff"/> </mask> </defs> <rect x="50" y="50" width="200" height="200" fill="red" mask="url(#m1)" filter="url(#f1)"/> </svg> My question

问题 Looking to adjust the tonal values of the green color channel in an image. Specifically, changing the green values (only) to really dark green or black. Any ideas using svg filters? 回答1: You want the SVG feColorMatrix with type="matrix" . Then discard the Red/Blue channels, and multiply the green-to-green to be darker. Specifically, to turn an RGBA image to use just the green channel and darken it by half (and have full alpha no matter what the original alpha was), you want these matrix

问题 I'm trying to implement multiple drop shadows into a single SVG filter, but I believe my question is more generic than that: how can I add multiple effects into a single SVG filter? In my case, here's specifically what I'm trying to do. I've got an SVG document that currently contains a single path element, and I've applied a single drop shadow effect to this path element. My SVG Document <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750"> <defs> <filter id="dropshadow

问题 I've been attempting to apply a drop shadow to my SVG Path. I googled across the filter option which when applied to path by applying: -webkit-filter: drop-shadow( -5px -5px 10px #000 ); which didn't seem to get applied. Here's a fiddle with my SVG path demonstrating the problem 回答1: Within your JSFiddle, I deleted your CSS and added a filter definition. It seems to work: <svg width="100%" height="300px"> <defs> <filter id="filter1" x="0" y="0"> <feOffset result="offOut" in="SourceAlpha" dx="

问题 I'm trying to create a material design like shadow on an SVG circle. I want this shadow to grow with a nice transition when you click on the circle, but at the moment I'm struggling to even figure out if it's possible to animate this transition, so I'm hoping someone might be able to help. I've added a small example of what I've got so far, a circle with a dropshadow which changes on mouseover. I spent quite a while trying to do the dropshadow in CSS but came to the conclusion that I don't

问题 I hope I'm using the correct term, but basically I am trying to create highlight along the top of a pie chart in D3. I've seen lot's of things for adding drop shadows but have been unable to make that work for a highlight. So, I tried adding an arc on top of the chart and adding a gaussian blur to it, but there are 2 issues with it: it doesn't transition with the rest of the chart and the highlighting extends above the chart, I can't seem to get it to stay within the edges of the chart. Here

问题 So I was duplicating the new iOS7 photo app icon using SVG blends, and got to something that looks good in IE10, Chrome 27 and Safari 6, but doesn't display at all in Firefox. Am I missing an obvious XML incantation? (Also - this code seems very verbose - if there are any suggestions on abbreviating this list, that would be great) <svg width="500px" height="1000px" viewBox="0 0 500 1000" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 100

问题 So I was duplicating the new iOS7 photo app icon using SVG blends, and got to something that looks good in IE10, Chrome 27 and Safari 6, but doesn't display at all in Firefox. Am I missing an obvious XML incantation? (Also - this code seems very verbose - if there are any suggestions on abbreviating this list, that would be great) <svg width="500px" height="1000px" viewBox="0 0 500 1000" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 100