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>
: