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

<!-- ========================================================================= -->
<!-- Test description here                                                     -->
<!--                                                                           -->
<!-- @author bill.haneman@ireland.sun.com                                      -->
<!-- @version $Id$                                                             -->
<!-- ========================================================================= -->
<?xml-stylesheet type="text/css" href="test.css" ?>
<svg width="450" height="500" viewBox="0 0 450 500">
    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->

    <defs>
        <filter id="blur"  filterUnits="userSpaceOnUse" x="0" y="-80" width="200" height="100" filterRes="200">
            <feGaussianBlur stdDeviation="2 2" x="0" y="-80" width="200" height="100"/> 
        </filter>
    </defs>

    <g id="testContent">
        <text class="title" x="50%" y="10%" font-size="3%" text-anchor="middle" >
            Text Element Features</text>
      <g font-family="dialog" font-size="3%" 
                  text-anchor="start" fill="MidnightBlue">
        <text x="10%" y="20%">
        Text can change 
        <tspan font-size="6%">size,</tspan>
        <tspan font-size="4%" font-family="Serif">typeface,</tspan> 
        <tspan fill="green">color,</tspan>
        or 
        <tspan fill="none" font-style="oblique" stroke="red" stroke-width="1">style</tspan>
        </text>
        <text fill="MidnightBlue" x="10%" y="25%"> 
        within a single text element.
        </text> 
        <text x="10%" y="35%">Styling features include 
            <tspan font-weight="bold">weight,</tspan> 
            <tspan font-style="oblique">posture,</tspan> and 
            <tspan font-family="serif">typeface.</tspan>
        </text>
        <rect x="10%" y="40%" width="45%" height="10%" fill="DodgerBlue"/>
        <text x="10%" y="45%">
        Graphics attributes such as 
            <tspan fill="red" opacity="0.3">opacity</tspan> can be applied.
        </text>
        <text x="10%" y="55%">"text decoration" can include 
            <tspan text-decoration="underline">underline,</tspan>
            <tspan text-decoration="overline">overline,</tspan> and
        </text> 
        <text x="10%" y="60%">
        <tspan text-decoration="line-through">strikethrough.</tspan>
<!--    <tspan baseline-shift="super">  Super</tspan>- and-
        <tspan baseline-shift="sub">sub</tspan>-scripts are available.-->
        </text>
        <text x="10%" y="70%" stroke-linecap="round" stroke-linejoin="round">
            Various 
            <tspan stroke="red" fill="none" stroke-width="0.5">outline
            </tspan>styles, 
            <tspan stroke="red" stroke-width="0.5" fill="blue" >fill colors
            </tspan>and
            <tspan stroke="red" stroke-width="1" fill="blue" >thicknesses
            </tspan>can be
        </text>
        <text x="10%" y="75%">used, and the outline stroke can be 
            <tspan stroke="black" fill="none" stroke-width="0.5" 
               stroke-linecap="round" stroke-linejoin="round">rounded</tspan>
            or 
            <tspan stroke="black" fill="none" stroke-width="0.5" 
               stroke-linecap="square" stroke-linejoin="miter">mitered.</tspan>
        </text>
        <text x="10%" y="85%">Text elements also can be</text>
        <text x="10%" y="90%">filtered and transformed.</text>
        <g font-size="8%" transform="translate(250, 450)">  
        <text x="0" y="0" filter="url(#blur)" fill="black" opacity="0.7"
         transform="skewX(40) translate(-6,-6)">
            Shadow
        </text>
        <text x="0" y="0" stroke="black" stroke-width="0.2" fill="white">
            Shadow
        </text>
        </g>
      </g>
    </g>

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