XML/SVG/text

Материал из Web эксперт
Перейти к: навигация, поиск

Displaying Text with blur Filters

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

 <defs>
   <filter id="blurFilter1" filterUnits="objectBoundingBox" x="0"
     y="0" width="100%" height="100%">
     <feGaussianBlur stdDeviation="4" />
   </filter>
 </defs>
 <g transform="translate(50,100)">
   <text id="normalText" x="0" y="0" fill="red" stroke="black"
     stroke-width="4" font-size="72">
     Normal Text
   </text>
   <text id="horizontalText" x="0" y="100"
     filter="url(#blurFilter1)" fill="red" stroke="black" stroke-width="4"
     font-size="72">
     Blurred Text
   </text>
 </g>

</svg> 

</source>


Displaying Text with Linear Gradients

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

   <defs>
     <linearGradient id="gradientDefinition"
        x1="0" y1="0" x2="300" y2="0" 
        gradientUnits="userSpaceOnUse">
        <stop offset="0%"   style="stop-color:#FFFF00"/>
        <stop offset="100%" style="stop-color:#000000"/>
     </linearGradient> 
   </defs>
   
   <g transform="translate(50,150)">
     <text id="horizontalText" x="0" y="0" 
           fill="url(#gradientDefinition)" 
           font-size="96">
           Gradient Text
     </text>
   </g>

</svg> 

</source>


Displaying Text with Opacity

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

   <g transform="translate(50,100)">
     <text id="horizontalText" x="0" y="0" 
           fill="red" 
           font-size="48">
           Opacity 1
     </text>
   
     <text id="horizontalText" x="0" y="100" 
           fill="red" 
           font-size="48"
           opacity=".6">
           Opacity .6
     </text>
   
     <text id="horizontalText" x="0" y="200" 
           fill="red" 
           font-size="48"
           opacity=".2">
           Opacity .2
     </text>
   </g>

</svg> 

</source>


Rendering a Text String

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

 <g transform="translate(100,100)">
   <text id="horizontalText" x="0" y="0" fill="red"
     font-size="18">
     Sample Text
   </text>
 </g>

</svg> 

</source>


Rendering a Text String with Colored Borders

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

 <g transform="translate(100,150)">
   <text id="horizontalText" x="0" y="0" fill="red" stroke="blue"
     stroke-width="4" font-size="96">
     Sample Text
   </text>
 </g>

</svg> 

</source>


Rendering Shadowed Text

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

 <g transform="translate(50,150)">
   <text id="horizontalText" x="8" y="8" fill="black"
     stroke="black" stroke-width="4" font-size="72">
     Shadow Text
   </text>
   <text id="horizontalText" x="0" y="0" fill="red" stroke="black"
     stroke-width="4" font-size="72">
     Shadow Text
   </text>
 </g>

</svg> 

</source>


Rotating a Text String Counterclockwise

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

   <g transform="translate(100,300)">
     <text id="simpleText" x="0" y="0" 
           transform="rotate(-90)"
           fill="red" 
           font-size="18">
           Counter clockwise Rotated Text
     </text>
   </g>

</svg> 

</source>


Text Following a Specified Path

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%"> 

 <defs>
   <path id="pathDefinition" d="m0,0 Q100,0 200,200 T300,200 z" />
 </defs>
 <g transform="translate(100,100)">
   <text id="textStyle" fill="red" stroke="blue" stroke-width="2"
     font-size="24">
     <textPath xlink:href="#pathDefinition">
       A Quadratic Bezier curve
     </textPath>
   </text>
 </g>

</svg> 

</source>


Using Text Decoration with Text Strings

   <source lang="xml">

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" 

    xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(50,50)" font-size="48" 
               fill="red" stroke="blue" 
               stroke-width="2">
   <text x="0" y="50">Regular Text</text>
   <text x="0" y="150" 
         text-decoration="line-through">Deleted Text</text>
   <text x="0" y="250" 
         text-decoration="underline">Underlined Text</text>
 </g>

</svg> 

</source>


Using the SVG tspan Element with Text Strings

   <source lang="xml">

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" 

    xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(10,10)"> 
   <text x="0" y="50" fill="red" font-size="36">
     One simple line of 
       <tspan font-weight="bold"
              fill="blue">simple</tspan>
     text
   </text>
   <text x="0" y="200" fill="red" font-size="36">
     Another simple line of 
       <tspan dx="0" dy="-50" 
              font-weight="bold" 
              fill="green">
         simple
       </tspan>
       <tspan dy="100">
          text
       </tspan>
   </text>
 </g>

</svg> 

</source>


Vertical text

   <source lang="xml">

<svg> 

 <g style="font-size: 10pt;">
   <text x="100" y="20" style="writing-mode: tb;"> Sideways   vertical</text>
   <text x="200" y="20" style="writing-mode: tb; glyph-orientation-vertical: 0;">Upright vertical</text>
   <text x="275" y="30" >Upright horizontal</text>
   <text x="275" y="100" style="writing-mode: lr; glyph-orientation-horizontal: 270">Sideways horizontal</text>
 </g>

</svg> 

</source>
Источник — «http://wbex.ru/index.php?title=XML/SVG/text&oldid=9907»