HTML and CSS Reference
In-Depth Information
<defs>
<pattern id="img1"
patternUnits="userSpaceOnUse"
width="315" height="212">
<image xlink:href="uf009705.png"
x="0" y="0"
width="305" height="212">
</pattern>
</defs>
Then use the pattern to fill:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,
0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)">
The full listing is in ch03/svg-16.html.
You can apply the same pattern to a
<text> element, although you should
pick your image carefully to ensure
that things are readable:
<text x="0" y="120"
font-family="sans-serif"
font-size="80"
font-weight="bold"
fill="url(#img1)" >
<tspan>HTML5</tspan>
<tspan x="0" y="180"
font-size="70">
ROCKS!
</tspan>
</text>
This code is taken from the file ch03/
svg-17.html.
Search WWH ::




Custom Search