svg-filters

问题 I have an page with an interactive SVG which looks fine on all browsers (Firefox, Chrome, even IE/Edge) except Safari where everything affected by one of the SVG filters turns into a fuzzy mush (looks like something rendered onto a low-resolution canvas which got scaled up using bilinear interpolation). Here now a small test case where the problem also appears: <svg> <defs> <filter id="filter" y="-100" x="-100" height="300" width="300"> <feGaussianBlur in="SourceAlpha" stdDeviation="3.5"><

问题 I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I don't need the whole graphic to be shadowed, just an element inside it. .shadow { fill: red; -webkit-filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) ); filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) ); } <svg height="150" width="150"> <g> <path d="M0,0 C-72,132 -72,-26 100,100"></path> </g> <g class="shadow" > <circle class="shadow" cx="100" cy="100" r="20"></circle> </g> </svg> As you

问题 I am working on an svg export utility for a drawing program on android. I am having a problem that the behind blur is cutoff past the shape boundaries - looks like i need to resize the viewBox or increase the margin or something. Does anyone know the best way? The test file url is here - it downloads as the mime type isn't setup correctly on the server and I cant restart it at the moment :(. There are embedded images and fonts in the file, Which is why it's big. But if you save it to disk you

问题 Way cool, i'd just realised there is something called flood-color and lighting-color in CSS. Does anyone know what is a flood-color and lighting-color and what do they do? What exactly do these mean?: The ‘flood-color’ property indicates what color to use to flood the current filter primitive subregion. The keyword currentColor and ICC colors can be specified in the same manner as within a specification for the ‘fill’ and ‘stroke’ properties. The ‘lighting-color’ property defines the color of

问题 I have a full screen background image .bg { left: 0; min-height: 100%; min-width: 100%; position: fixed; top: 0; z-index: -1; } and want to apply a CSS3 filter, personally I would like to use a blur effect, at the same position as my body .container { margin: 0 auto; width: 1000px; } Here's an example: screenshot http://imageshack.us/a/img443/4976/j7qj.jpg I want to write text over the blurred container. 回答1: http://jsfiddle.net/QvSng/6/ CSS body { position: absolute; top: 0; bottom: 0; left:

问题 Coming from a graphic design background I know how to cheat to create an effect of additive color. The same basic solution is proposed in another post on here. The post above refers to transparent .png files but the concept is the same. The basic effect I'd like to create is like the one pictured here. I'd love to do it in SVG so that it can scale and so that when I am talking about a given topic (let's just say the topic is 'green') I can enlarge that portion of the graphic and the

问题 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, the way how this can be used, but i need to turn brightness filter into svg code. Any ideas how can i do this? What i have to do, is a small gallery, with darkened images, and with normal images on hover without using 2x images. 回答1: You want to use an SVG filter. An example of a filter that will

问题 Is it possible to take an IMG picture and replace one exact color to another, say #fff to #000, keeping all other colors unchanged? Probably color matrix from SVG filters can help? 回答1: This is trivial to do with Canvas. It is also possible to do with SVG, but it's convoluted. The following method works with conventional fully opaque images. First, you convert every non-matching color value in each channel to zero and every matching color value to 1 using a long ComponentTransfer (the index

问题 I try to apply a blur filter to a svg elment, but it seems that Safari can't render the colors right. Here is an example of my problem: <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke-width="3" fill="#ff4300" filter="url(#f1)" /> </svg> http://jsfiddle.net/6gZ8t/1/ Safari: Chrome: The color is right in every brwoser expet Safari, where it is much brighter...Does anyone know a fix for

问题 I want to use a spotlight effect but it only seems to work in Chrome, looks "just ok" in Firefox, but will not position (x,y,z) in Safari. (Other browsers not tested) I've tried different filter and primitive units, and while this makes a difference, Safari still cannot seem to position the lighting effect in any case. In pursuit of understanding what is going on, I've tried lots of workarounds including different userSpaceOnUse/objectBoundingBox combos, and different svg structure but have