I've found Google Chrome is not displaying SVG elements which have both a negative scale and a filter (e.g. Gaussian blur). Is this a bug?
Minimum non-working example:
<filter id="blur-norm">
<feGaussianBlur stdDeviation="1 3" />
</filter>
<g id="norms" transform="scale(-0.5)">
<rect x="-40" y="-50" width="100" height="100" fill="#50aea9" stroke="#355270" stroke-width="5" />
</g>
Comparing this JSFiddle in
Firefox 32 / Win7: element is visible and blurred
Chrome 37 / Win7: element is not visible
In chrome, setting the scale to be a positive number will make the element appear (although incorrectly scaled); alternatively, removing the filter reference will make the element appear (although not blurred).
Am I doing something wrong, or is this a Blink bug?
Looks like it was reported a few days ago.
https://code.google.com/p/chromium/issues/detail?id=409602
I couldn't get Chrome to display any filters until I removed the out of the head section then presto, got all filters displayed.
Related
The Problem
I noticed a strange gap between a rect and a path that, according to the coordinates, should look like this:
but instead looks like this:
It occurs in Firefox, Edge and IE, in Chrome only in certain zoom levels or when adding Stoke.
I tried to:
remove all white spaces (looks like the very same problem)
add attribute shape-rendering="crispEdges"
move the elements closer together so that they would overlap (jsfiddle)
Improved the problem, but didn't fix it and introduced new ones (like stroke not matching).
Result in Chrome(v64.0.3282.140):
Result in Firefox(v58.0.1):
Thanks for your consideration
Example
<svg>
<g transform="matrix(1,0,0,1,60,10)">
<rect width="60" height="10" x="-30" y="0" rx="5" ry="5"></rect>
<path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10" ></path>
</g>
</svg>
<style>
g{
stroke: red;
fill: black;
}
</style>
The rects outline seems to be rendered in color different from black.
Couldn't reproduce the behaviour on Chrome 63 (63.0.3239.132) without the style element, not even scanning through the zoom levels.
However, one possible fix is to close the path with the closepath specifier ( Z or z in the path spec; see here for the pertinent portion of the svg specs):
<path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10"></path>
In case this modification does not suffice, complement the path to paint over the rectangle's outline along the x interval covered by the path-defined shape:
<path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10 l0,-1 L15,9 Z"></path>
CSS has a handy option for background images in HTML elements: If I have a pattern that is 20 pixels high, but my HTML element has a height that isn't evenly divisible by 20 (e.g. 150px or 35px), background-repeat: round will tile the pattern to make it appear seamless, stetching/squeezing the tiles as needed.
Is there an equivalent styling option for patterns within an SVG element? For example:
<defs>
<pattern id="myPattern" width="200" height="100" patternUnits="userSpaceOnUse">
... some pattern ...
</pattern>
</defs>
<rect width="200" height="230" fill="#myPattern"/>
I'd like to have two whole repetitions of the pattern in my rectangle (stretched to 115px each), not two whole repetitions and a partial third.
EDIT
The solution by ccprog (below) works fine for this particular example. However, it requires the pattern to define how many times it will be repeated. I'm still holding out hope for a general solution for cases where the elements using the pattern are of different heights (and hence will require different numbers of pattern repetitions).
You can set a viewBox for patterns and define pattern units in terms of the object bounding box:
<defs>
<pattern id="myPattern" width="50%" height="50%"
viewBox="0 0 200 100" preserveAspectRatio="none"
patternUnits="objectBoundingBox">
... some pattern ...
</pattern>
</defs>
<rect width="200" height="230" fill="#myPattern"/>
It's not completely equivalent to CSS round, as you implicitely give the absolute number of repetitions with the width/height attributes, no matter how large the filled area is.
I'm generating pie charts in SVG (using the ruby library svg-graph, but that isn't totally relevant), but there is a strange edge case where the chart is totally blank. This occurs in Chrome and Safari, but not in IE11 or Firefox.
I've narrowed it down to a certain path element whose d attribute varies slightly between the two. One produces a yellow circle while the other does not. My SVG knowledge is limited, so I don't understand why the second snippet isn't outputting anything. Any ideas?
Working:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M109.0,109.0 L109.0,0.0 A109.0,109.0 0, 1,1, 108.99999000000007 0.0 Z"
transform="translate( -3.216245299353273e-15 10.0 )"
style="fill: #FFDC00" />
</g>
</svg>
Not working:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M108.5,108.5 L108.5,0.0 A108.5,108.5 0, 1,1, 108.49999000000007 0.0 Z"
transform="translate( -3.216245299353273e-15 10.0 )"
style="fill: #FFDC00" />
</g>
</svg>
This may be a rounding issue. The path is trying to draw a circle using the arc path instruction "A". The beginning and ending points of the arc are very close together (< 0.0000001 units). If the SVG renderer thinks the two points are actually the same then it will draw an empty arc (0% of a circle) instead of a nearly complete (99.9999% of a circle).
You can try separating the beginning and ending points slightly further away (e.g., try 359 degrees instead of 360); as the Z instruction will close the path anyway and hide the tiny wedge left over. Also to see more of what's going on try stroking the path instead of filling it.
Or draw a circle using two half-circle arcs. See Circle drawing with SVG's arc path
Sorry for the garish colors, but it most clearly shows the bad blending with this combination.
On the left side of the inner circle, there is a dark line where the blue meets the red. But on the right half of the inner circle, there is not. This is happening in Chrome, FF, and IE11.
Any idea why?
<svg viewBox="0 0 500 500" width="500" height="500">
<circle fill="red" cx="250" cy="215" r="165"/>
<circle fill="#2994FF" cx="250" cy="215" r="100"/>
</svg>
Picture version:
What you think you are seeing is not actually real. It is an optical illusion caused mostly by the contrast change between the two colours. Dark to light and then light to dark.
The layout of the subpixels on your monitor may be contributing as well - I'm not sure on that.
If we create a magnified version of the two edges next to one another, you should see that those strong dark and light borders are not actually there.
I'm a newbie regarding canvas and I've searched and tried alot, but never accomplished to find the right solution to use this one: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
I want to use it with a image for a fixed background, so I can put the same non-blurred image on top, while having a changeable page, that changes design when exchanging the image.
I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox and the performance of such a blurred big image is terrible...
Thanks!
"I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox ..."
Firefox can do CSS blurring:
First, include an SVG file containing the desired blur in the web page
<svg xmlns:svg="http://www.w3.org/2000/svg">
<filter id="gaussian">
<feGaussianBlur id="myBlur" stdDeviation="5" />
</filter>
</svg>
Next, get a reference to the canvas element in the normal way, eg:
var canvas = document.getElementById('myCanvas');
... and apply the filter to it:
canvas.style.webkitFilter = 'url(#gaussian)';
canvas.style.filter = 'url(#gaussian)';
To change the blur value, you need a handle to the gaussian blur element itself:
var blurFilter = document.getElementById('myBlur');
Use the setStdDeviation(stdDeviationX, stdDeviationY) method to change the blur. Both arguments are numbers, not strings:
blurFilter.setStdDeviation(5, 5);
(Seems to work OK in latest versions of Firefox and Chrome - though Chrome doesn't like it when the blur values are set to 0 ...)