svg-filters

问题 This question already has answers here : Adding feDropShadow to a vertical line in SVG makes it disappear (2 answers) Closed 2 years ago . I'm trying to add a shadow to my SVG. It works well with all 2D objects, but when same filter is applied to a straight line (either <line> or <path> ), the line becomes invisible, and no shadow is added. Demo: https://jsfiddle.net/ccj0Ldfh/1/ 回答1: Per the last paragraph here Keyword objectBoundingBox should not be used when the geometry of the applicable

问题 So I'm trying to use a filter on an image in an HTML page like so in order to overlay the image with a certain color. My sample image is white: img { filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter>

问题 Why does the grid in this SVG not fill the entire 256x256 space? No matter what size I change it to, about 15% of the grid is cut off, which appears to me to be arbitrary in the context of my code. <svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <pattern id="grid" width="18.75" height="18.75" patternUnits="userSpaceOnUse"> <path d="M 18.75 0 L 0 0 0 18.75" fill="none" stroke="black" stroke-width="1"/> </pattern> <rect id=

问题 Using svg guassian blur filter to perform cross browser image blurring. Overall, it works really well except in the case of Safari. In desktop Safari, the image is blurred but it is also lightened. This doesn't happen in any other browser (literally tested in Firefox, Chrome, IE9-11, and mobile Safari in iOS 7). Here's a jsfiddle demonstrating the live svg filter and a linked screenshot from what Safari is seeing, http://jsfiddle.net/vtDYg/3/ Here also is the svg code current in use: <svg

问题 By reading HSL/HSV color theory, I get the impression that hue component is a cyclical attribute that repeats every 360 degrees and can be changed independently of saturation and lightness/value. Correct me if I am wrong, but these statements logically follow the previous definition: Rotating hue by 360 degrees yields the same color Rotating hue by 180 degrees twice yields the original color Rotating hue by 180 degrees followed by -180 degrees yields the original color However, only the

问题 I have created a custom SVG filter which uses the background image as the source. It then applies a random displacement map to it to simulate an optical distortion (e.g. water caustics, warping from hot, flowing air), which I really like. It renders correctly in Inkscape, but not in Internet Explorer 10 nor Chrome. Apparently, using the background image as a filter input is an obscure feature that some SVG renderers might not support due to the extra memory required to buffer intermediate

问题 I'm currently in the phase of learning and implementing SVG and I've stumbled upon a "drop-shadow" issue in which I can't seem to set the drop-shadow to be assigned in px values. As an example: <filter id="shadow" height="130%" width="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur> <feOffset dx="1" dy="1" result="offsetblur"></feOffset> <feFlood flood-color="#fff"></feFlood> <feComposite in2="offsetblur" operator="in"></feComposite> <feMerge> <feMergeNode><

问题 I created an animation for my personal website, its working in Chrome and Firefox with no problems and I don't care about IE, but its not working on Safari, I think because Safari won't recognise the fill:url(..) and filter:url(..) from seperate css file. Here's the actual animation link from codepen: http://codepen.io/GetTurnt/pen/kXREWw I would really like to know what is happening. Here is the actual code: .container { width:50%; height:50%; padding: 0 25%; } .st0 { fill:none; stroke:

问题 For some reason I can't get my SVG filters to work in Firefox. They work fine in Opera, however. The element whose property I set to the filter on just disappears. It's very odd. Here's my javascript code: defsElement = SVGDoc.createElement("defs"); var filterElement = SVGDoc.createElement("filter"); filterElement.setAttribute( "id", "cm-mat"); filterElement.setAttribute( "filterUnits", "objectBoundingBox"); var fecolormatrixElement = SVGDoc.createElement("feColorMatrix");

问题 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 follows: original grayscale http://crawdad.cornell.edu/test/1.png red foreground http://crawdad.cornell.edu/test/2.png red foreground, yellow background http://crawdad.cornell.edu/test/3.png From left to right, these show the original grayscale image, that image where the user selected red as