W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Re: [css3-images] July F2F minutes comment regarding SVG and non-opaque colors

From: Alan Gresley <alan@css-class.com>
Date: Fri, 19 Aug 2011 19:58:35 +1000
Message-ID: <4E4E33CB.2060502@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Cameron McCormack <cam@mcc.id.au>, Brian Manthos <brianman@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
On 19/08/2011 7:33 PM, Alan Gresley wrote:
> On 19/08/2011 8:45 AM, Tab Atkins Jr. wrote:
>> On Thu, Aug 18, 2011 at 3:36 PM, Cameron McCormack<cam@mcc.id.au> wrote:
>>> It's true that SVG 1.1's<color> definition doesn't technically allow
>>> rgba()
>>> colours, but it would be interesting to see what implementations do
>>> with it
>>> currently to know whether this is compatible with Image Values'
>>> definitions.
>>> Also whether this behaviour is the same as an SVG gradient where some
>>> stops
>>> have non-zero stop-opacity property values.
>>
>> I can't immediately test other browsers, but Chrome simply ignores the
>> transparency of the color, while Firefox does the transition in
>> post-multiplied space (same as they currently do for
>> linear-gradient()).
>>
>> ~TJ
>
>
> Both Chrome and Safari 5.1 seem to interpolate rbga in pre-multiplied
> space.


Correction. Both Chrome and Safari 5.1 has no transparency of the color. 
rgba(255,0,255,0) is treated like rgb(255,0,255). Chrome and Safari 5.1 
only works the same as the other UAs with stop-opacity:0 (as seen the 
the code below).


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 
1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<style type="text/css">
   svg {background: black; width: 100px; height: 100px;}
</style>
</head>
<body>

<svg:svg>

<svg:g>
<svg:linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" 
y1="100" x2="100" y2="0">
   <svg:stop offset="0" style="stop-color:rgba(255,255,0,1)"/>
   <svg:stop offset="1" 
style="stop-color:rgba(255,0,255,0);stop-opacity:0"/>
</svg:linearGradient>
<svg:path fill="url(#gradient)" d="M0,0v100h100V0H0z" />
</svg:g>

</svg:svg>

</body>
</html>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 19 August 2011 09:58:43 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:43 GMT