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