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