Re: recommendations to css3 draft ...

Hi Björn,

Bjoern Hoehrmann wrote:
> * Robin Berjon wrote:
>>It's probably just you because the fact is you can put as many gradients 
>>as you like into a single SVG document :)
> 
> Yes, you could do something like
> 
>   <?xml version="1.0"?>
>   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
>     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
>   <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
>   
>     <view id = 'v1' viewBox = '0   0 100 100' />
>     <view id = 'v2' viewBox = '0 100 100 100' />
>     <view id = 'v3' viewBox = '0 200 100 100' />
>     <view id = 'v4' viewBox = '0 300 100 100' />
>     <view id = 'v5' viewBox = '0 400 100 100' />
>     <view id = 'v6' viewBox = '0 500 100 100' />
>   
>     <defs>
>       <linearGradient id="g1">
>         <stop offset="0%" stop-color="black" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>       <linearGradient id="g2">
>         <stop offset="0%" stop-color="red" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>       <linearGradient id="g3">
>         <stop offset="0%" stop-color="green" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>       <linearGradient id="g4">
>         <stop offset="0%" stop-color="lime" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>       <linearGradient id="g5">
>         <stop offset="0%" stop-color="blue" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>       <linearGradient id="g6">
>         <stop offset="0%" stop-color="orange" />
>         <stop offset="100%" stop-color="white" />
>       </linearGradient>
>     </defs>
>   
>     <rect y =   '0' height = '100' width = '100' fill="url('#g1')" />
>     <rect y = '100' height = '100' width = '100' fill="url('#g2')" />
>     <rect y = '200' height = '100' width = '100' fill="url('#g3')" />
>     <rect y = '300' height = '100' width = '100' fill="url('#g4')" />
>     <rect y = '400' height = '100' width = '100' fill="url('#g5')" />
>     <rect y = '500' height = '100' width = '100' fill="url('#g6')" />
>   
>   </svg>
> 
> and then reference e.g.
> 
>   url("gradients.svg#v1")
> 
> or even leave the view elements off and reference them via e.g.
> 
>   url("gradients.svg#svgView(viewBox(0,500,100,100))")
> 
> Can you come up with a better solution that does not require to
> change SVG?

This seems more than overly complicated to me, in addtion to changing 
SVG. Why would you need to refer to geometry? To get a gradient, just do:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <linearGradient id="g1">
        <stop offset="0%"   stop-color="black" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
    </svg>

And then refer to #g1. Use the geometry the browser knows about to fill 
appropriately.


>>A few lines? You sure? Just for linear gradients, you need:
>>
>> - two points to specify where it starts and where it ends, which adds
>>   up to four items.
>> - as many rgba stops as there are colours, and for each their offsets
>> - what happens at gradient edges, does it pad, reflect, or repeat?
>>
>>So what would it look like? Perhaps:
> 
> Not really, the gradient would fill the entire shape for which the
> start/end coordinates are already known, and the spread method is
> also not needed, you could say "pad" implicitly, that would cover
> most cases I can think of. So the syntax for the above could be as
> in http://lists.w3.org/Archives/Public/www-style/2004May/0184.html
> 
>   @linear-gradient g1 { @stop-at 0% black;  @stop-at 100% white; }

Ah yes, inventing yet more ad hoc @rules to create structure. Hmmm. I 
think you're getting it wrong however, what you you think about this 
approach:

@namespace svg "http://www.w3.org/2000/svg";

@element svg|svg {
   @element svg|linearGradient {
     @attribute id "g1";
     @element svg|stop {
       @attribute offset "5%";
       @attribute stop-color "white";
     }
     @element svg|stop {
       @attribute offset "95%";
       @attribute stop-color "black";
     }
   }
}

I never understood why the CSS WG resisted creating a general purpose 
markup syntax, it would be so useful...

> That's just a few lines, yes. Of course, if you want to do hyper
> sophistacted gradients, this would not suffice, but then, you can
> still use background images as people use them today.

Sorry, but wanting my gradients to go in more than one direction is not 
"hyper-sophisticated". I don't get the impression that the examples you 
provide could even do vertical gradients (or perhaps not horizontal ones 
-- they don't see to have direction).


> That's a perfect fit then, gradients are style, don't you think?

Gradients are style the way images are style. Sure enough you could come 
up with a CSS syntax for pixels.

-- 
Robin Berjon

Received on Wednesday, 18 August 2004 13:25:04 UTC