samples/tests/opacity.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.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- Opacity test. Apply 'stroke-opacity' 'fill-opacity' and 'opacity'         -->
<!--                                                                           -->
<!-- @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: stroke-opacity, fill-opacity, opacity </title>
    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->

    <g id="testContent">

  <text x="225" y="50" class="title">
    Opacity : stroke-opacity, fill-opacity and opacity
  </text>
  <g class="legend">
    <defs>
       <circle id="elem" cx="0" cy="0" r="35" 
             style="fill: yellow; stroke: black; stroke-width: 8;"/>
       <rect id="bg" x="-45" y="-45" width="90" height="90" 
             style="fill:orange"/>
    </defs>
    <g transform="translate(75 130)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem" 
           style="stroke-opacity:1; fill-opacity:1"/>
      <text x="0" y="60">opacity:1</text>
      <text x="0" y="70">stroke-opacity:1</text>
      <text x="0" y="80">fill-opacity:1</text>
    </g>
    <g transform="translate(175 130)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:1; fill-opacity:.5"/>
      <text x="0" y="60">opacity:1</text>
      <text x="0" y="70">stroke-opacity:1</text>
      <text x="0" y="80">fill-opacity:0.5</text>
    </g>
    <g transform="translate(275 130)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:.5; fill-opacity:1"/>
      <text x="0" y="60">opacity:1</text>
      <text x="0" y="70">stroke-opacity:0.5</text>
      <text x="0" y="80">fill-opacity:1</text>
    </g>
    <g transform="translate(375 130)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:.5; fill-opacity:.5"/>
      <text x="0" y="60">opacity:1</text>
      <text x="0" y="70">stroke-opacity:0.5</text>
      <text x="0" y="80">fill-opacity:0.5</text>
    </g>

    <g transform="translate(75 330)" >
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:1; fill-opacity:1; opacity:.5;"/>
      <text x="0" y="60">opacity:0.5</text>
      <text x="0" y="70">stroke-opacity:1</text>
      <text x="0" y="80">fill-opacity:1</text>
    </g>
    <g transform="translate(175 330)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:1; fill-opacity:.5; opacity:.5;"/>
      <text x="0" y="60">opacity:0.5</text>
      <text x="0" y="70">stroke-opacity:1</text>
      <text x="0" y="80">fill-opacity:0.5</text>
    </g>
    <g transform="translate(275 330)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:.5; fill-opacity:1; opacity:.5;"/>
      <text x="0" y="60">opacity:0.5</text>
      <text x="0" y="70">stroke-opacity:0.5</text>
      <text x="0" y="80">fill-opacity:1</text>
    </g>
    <g transform="translate(375 330)">
      <use xlink:href="#bg"/>
      <use xlink:href="#elem"
           style="stroke-opacity:.5; fill-opacity:.5; opacity:.5;"/>
      <text x="0" y="60">opacity:0.5</text>
      <text x="0" y="70">stroke-opacity:0.5</text>
      <text x="0" y="80">fill-opacity:0.5</text>
    </g>

  </g>

    </g>

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