63 lines
2.1 KiB
XML
63 lines
2.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<title>
|
|
Fills, strokes and opacity
|
|
</title>
|
|
|
|
<defs>
|
|
<linearGradient id="gradient_fill">
|
|
<stop offset="0" stop-color="red" />
|
|
<stop offset="1" stop-color="green" />
|
|
</linearGradient>
|
|
<linearGradient id="stroke_fill">
|
|
<stop offset="0" stop-color="blue" />
|
|
<stop offset="1" stop-color="yellow" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<g transform="translate(10,10)">
|
|
<rect width="100" height="100"
|
|
fill="red" stroke="green" stroke-width="10"
|
|
fill-opacity="0.5" stroke-opacity="0.5" />
|
|
|
|
<g opacity="0.5">
|
|
<rect x="115" width="100" height="100"
|
|
fill="red" stroke="green" stroke-width="10" />
|
|
</g>
|
|
|
|
<!--
|
|
was wrong in WebKit, should render as preceding example
|
|
as "opacity" is not equivalent to "stroke-opacity"
|
|
and "fill-opacity" combined
|
|
-->
|
|
<rect x="230" width="100" height="100"
|
|
fill="red" stroke="green" stroke-width="10"
|
|
opacity="0.5" />
|
|
|
|
<!--
|
|
was wrong in WebKit, "fill-opacity" and "stroke-opacity"
|
|
are not taken into account for gradient fills and strokes
|
|
-->
|
|
<rect x="345" width="100" height="100"
|
|
fill="url(#gradient_fill)" stroke="url(#stroke_fill)" stroke-width="10"
|
|
fill-opacity="0.5" stroke-opacity="0.5" />
|
|
|
|
<!--
|
|
was wrong in WebKit, same bug as rect #2
|
|
-->
|
|
<rect x="460" width="100" height="100"
|
|
fill="url(#gradient_fill)" stroke="url(#stroke_fill)" stroke-width="10"
|
|
opacity="0.5" />
|
|
</g>
|
|
|
|
<!-- reference images -->
|
|
<g transform="translate(5,120)">
|
|
<image xlink:href="resources/groupOpacityReference1.png" width="110" height="110" />
|
|
<image x="115" xlink:href="resources/groupOpacityReference2.png" width="110" height="110" />
|
|
<image x="230" xlink:href="resources/groupOpacityReference2.png" width="110" height="110" />
|
|
<image x="345" xlink:href="resources/groupOpacityReference3.png" width="110" height="110" />
|
|
<image x="460" xlink:href="resources/groupOpacityReference4.png" width="110" height="110" />
|
|
</g>
|
|
|
|
</svg>
|