samples/tests/opacity2.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<!-- ========================================================================= -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved.        -->
<!--                                                                           -->
<!-- This software is published under the terms of the Apache Software License -->
<!-- version 1.1, a copy of which has been included with this distribution in  -->
<!-- the LICENSE file.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- Opacity2 test. Apply 'opacity' on group                                   -->
<!--                                                                           -->
<!-- @author Thierry.Kormann@sophia.inria.fr                                   -->
<!-- @version $Id$     -->
<!-- ========================================================================= -->

<?xml-stylesheet type="text/css" href="test.css" ?>

<svg id="body" width="450" height="500" viewBox="0 0 450 500">
<title>Opacity: opacity on group</title>
    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->

    <g id="testContent">

  <text x="225" y="50" class="title">
    Opacity2 : opacity on group
  </text>
  <g class="legend">
    <defs>
     <g id="elem">
       <circle cx="-35" cy="0" r="35" 
             style="fill: #0000FF; stroke: #0000AA; stroke-width: 8;"/>
       <circle cx="0" cy="0" r="35" 
             style="fill: #FF0000; stroke: #AA0000; stroke-width: 8;"/>
     </g>
    </defs>
    <g transform="translate(140 120)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:1">
        <use xlink:href="#elem" 
             style="stroke-opacity:1; fill-opacity:1"/>
      </g>
      <text x="-20" y="60">opacity:1</text>
      <text x="-20" y="70">stroke-opacity:1 fill-opacity:1</text>
    </g>
    <g transform="translate(340 120)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:.5">
        <use xlink:href="#elem" 
             style="stroke-opacity:1; fill-opacity:1"/>
      </g>
      <text x="-20" y="60">opacity:0.5</text>
      <text x="-20" y="70">stroke-opacity:1 fill-opacity:1</text>
    </g>

    <g transform="translate(140 250)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:1">
        <use xlink:href="#elem" 
             style="stroke-opacity:.5; fill-opacity:1"/>
      </g>
      <text x="-20" y="60">opacity:1</text>
      <text x="-20" y="70">stroke-opacity:0.5 fill-opacity:1</text>
    </g>
    <g transform="translate(340 250)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:.5">
        <use xlink:href="#elem" 
             style="stroke-opacity:.5; fill-opacity:1"/>
      </g>
      <text x="-20" y="60">opacity:0.5</text>
      <text x="-20" y="70">stroke-opacity:0.5 fill-opacity:1</text>
    </g>

    <g transform="translate(140 380)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:1">
        <use xlink:href="#elem" 
             style="stroke-opacity:1; fill-opacity:.5"/>
      </g>
      <text x="-20" y="60">opacity:1</text>
      <text x="-20" y="70">stroke-opacity:1 fill-opacity:0.5</text>
    </g>
    <g transform="translate(340 380)">
       <rect x="-80" y="-45" width="125" height="90" 
             style="fill-opacity:1; stroke-opacity:1; opacity:1; fill:#cecece"/>
      <g style="opacity:.5">
        <use xlink:href="#elem" 
             style="stroke-opacity:1; fill-opacity:.5"/>
      </g>
      <text x="-20" y="60">opacity:0.5</text>
      <text x="-20" y="70">stroke-opacity:1 fill-opacity:0.5</text>
    </g>


  </g>

    </g>

    <!-- ============================================================= -->
    <!-- Batik sample mark                                             -->
    <!-- ============================================================= -->
    <use xlink:href="../batikLogo.svg#Batik_Tag_Box" />
    
</svg>