XML/SVG/text

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

Displaying Text with blur Filters

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



Displaying Text with Linear Gradients

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



Displaying Text with Opacity

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



Rendering a Text String

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



Rendering a Text String with Colored Borders

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



Rendering Shadowed Text

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



Rotating a Text String Counterclockwise

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



Text Following a Specified Path

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



Using Text Decoration with Text Strings

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



Using the SVG tspan Element with Text Strings

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



Vertical text

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