HTML and CSS Reference
In-Depth Information
The transformation functions for SVG and <canvas> look similar,
and they are. The main difference from a developer perspective is
that SVG transformations expect angles in degrees, whereas
<canvas> transformations expect angles in radians.
GRADIENTS
As with <canvas> , an SVG gradient is defined in a separate object. You
can define this object at the top of your SVG file or element inside a
<defs> element, and then reference the gradient object through CSS :
<svg viewBox="0 0 320 240">
<defs>
<linearGradient id="grad1"
x1="0%" y1="0%" x2="100%"
y2="100%">
<stop offset="0%" style="
stop-color:rgb(127,127,127);
stop-opacity:1"/>
<stop offset="50%" style="
stop-color:rgb(255,255,255);
stop-opacity:1"/>
<stop offset="100%" style="
stop-color:rgb(127,127,127);
stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="20" y="20"
width="200" height="200"
style="fill: url(#grad1)">
</rect>
</svg>
The <rect> element references the grad1 gradient through its fill style.
See the full listing in the ch03/svg-15.html file in the code download.
PATTERNS AND MASKS
You might expect that you could create a repeating background by
specifying something like fill="url(example.png)" , but that won't work.
You have to add the image to a <pattern> :
Search WWH ::




Custom Search