I’m using JUCE fe6fa12f551357c2ba5a5cf1ca6041d084c9dee8 (latest master) and there appears to be a problem when rendering SVG radial gradients. I’m 100% certain, that this used to work correctly in earlier versions of JUCE, more precisely it worked in 90bbda1f195b4cf940f54f7f41986e0d5d68c9ec
. Here are some screenshots:
It’s supposed to look like this:
But it looks like this in the Projucer and my app:
I’m using “Normal” blending. This is the SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="635px" height="254px" viewBox="0 0 635 254" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient cx="50.000298%" cy="50.0005245%" fx="50.000298%" fy="50.0005245%" r="50.0001489%" gradientTransform="translate(0.500003,0.500005),scale(1.000000,0.997848),translate(-0.500003,-0.500005)" id="radialGradient-1">
<stop stop-color="#B3D3E6" offset="0%"></stop>
<stop stop-color="#A9CDE1" offset="25.38%"></stop>
<stop stop-color="#8EBED2" offset="68.62%"></stop>
<stop stop-color="#76B1C5" offset="100%"></stop>
</radialGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="backdrop-outlines" transform="translate(121.000000, 129.000000)" fill="url(#radialGradient-1)" fill-rule="nonzero">
<path d="M36.228,0 L11.07,0 C4.983,0 0,4.991 0,11.093 L0,36.307 C0,42.408 4.983,47.4 11.07,47.4 L36.228,47.4 C42.318,47.4 47.298,42.408 47.298,36.307 L47.298,11.093 C47.299,4.992 42.318,0 36.228,0 Z" id="glow"></path>
</g>
</g>
</svg>
It may be worth noting, that the svg is using a transformed gradient.
I tried with the CoreGraphics and the OpenGL renderer. The OpenGL Renderer yields the expected results, the CoreGraphics renderer does not. Therefore parsing is correct.
I noticed, that when parsing the SVG gradient, the FillType::transform member is set for radial gradients, but for linear gradients the transform appears to be applied to the points during parsing.
In CoreGraphicsContext::drawGradient() applyTransform() AND state->fillType.transform.transformPoints() is called. Maybe this transforms the radial gradient twice? If I change CoreGraphicsContext::drawGradient() to:
void CoreGraphicsContext::drawGradient()
{
flip();
applyTransform (state->fillType.transform);
CGContextSetAlpha (context, state->fillType.getOpacity());
const ColourGradient& g = *state->fillType.gradient;
CGPoint p1 (convertToCGPoint (g.point1));
CGPoint p2 (convertToCGPoint (g.point2));
//state->fillType.transform.transformPoints (p1.x, p1.y, p2.x, p2.y);
if (state->gradient == 0)
state->gradient = createGradient (g, rgbColourSpace);
if (g.isRadial)
CGContextDrawRadialGradient (context, state->gradient, p1, 0, p1, g.point1.getDistanceFrom (g.point2),
kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
else
CGContextDrawLinearGradient (context, state->gradient, p1, p2,
kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
}
The output looks correct.
Best,
Ben
Update: The CoreGraphics and related SVG parsing code code is ancient - so not sure what’s going on here.
