- From: Ken Stacey <ken@svgmaker.com>
- Date: Tue, 05 Jan 2010 21:37:42 +1000
- 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 UTC