W3C home > Mailing lists > Public > www-svg@w3.org > January 2010

Re: Fwd: Question on gradient userSpaceOnUse

From: Ken Stacey <ken@svgmaker.com>
Date: Tue, 05 Jan 2010 21:37:42 +1000
Message-ID: <4B432486.2080806@svgmaker.com>
To: www-svg@w3.org
I agree with Dirk, the gradient should be perpendicular in user space.

Below is Jeff and Erik's examples extended further to show a 
perpendicular line in user space.

Ken Stacey

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g1" x1="0" y1="0" x2="400" y2="50" 
gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="red"/>
       <stop offset="0.5" stop-color="green"/>
       <stop offset="1.0" stop-color="blue"/>
     </linearGradient>
     <linearGradient id="g2" x1="0" y1="0" x2="100" y2="50" 
gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="red"/>
       <stop offset="0.5" stop-color="green"/>
       <stop offset="1.0" stop-color="blue"/>
     </linearGradient>
   </defs>

   <g transform="translate(100,100)">
     <g transform="scale(0.25,1)">
       <rect width="400" height="50" fill="url(#g1)" />
       <!-- show the gradient vector in current user space -->
       <line x1="0" y1="0" x2="400" y2="50" stroke="black"/>
       <!-- show the perpendicular vector in current user space -->
       <line x1="0" y1="0" x2="400" y2="50" stroke="black" 
transform="translate(200,25) rotate(-90)"/>
     </g>
	</g>
   <g transform="translate(100,200)">
     <rect width="100" height="50" fill="url(#g2)" />
     <!-- show the gradient vector in current user space -->
     <line x1="0" y1="0" x2="100" y2="50" stroke="black"/>
       <!-- show the perpendicular vector in current user space -->
     <line x1="0" y1="0" x2="100" y2="50" stroke="black" 
transform="translate(50,25) rotate(-90)"/>
   </g>
</svg>
Received on Tuesday, 5 January 2010 11:38:14 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:44 GMT