textLength sample

by mklemma

HTML

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" style="font-family: Times New Roman;font-size: 14px;">
      <text x="0" y="20">
         This is a pen.
      </text>
      <text x="0" y="60" textLength="300">
         This is a pen.
      </text>
      <g>
        <path d="M 30 160 Q 150 0 300 160" stroke="black" fill="none" id="path1"></path>
        <text>
        <textPath href="#path1">This is a pen.</textPath>
        </text>
      </g>
      <g>
        <path d="M 30 200 Q 150 40 300 200" stroke="black" fill="none" id="path2"></path>
        <text textLength="300">
        <textPath href="#path2">This is a pen.</textPath>
        </text>
      </g>
      <g>
        <path d="M 30 240 Q 150 80 300 240" stroke="black" fill="none" id="path3"></path>
        <text>
        <textPath href="#path3" textLength="300">This is a pen.</textPath>
        </text>
      </g>
      <g>
        <path d="M 30 280 Q 150 120  300 280" stroke="black" fill="none" id="path4"></path>
        <text textLength="300">
        <textPath href="#path4" textLength="300">This is a pen.</textPath>
        </text>
      </g>
      <g>
        <path d="M 30 320 Q 150 160  300 320" stroke="black" fill="none" id="path5"></path>
        <text textLength="150">
        <textPath href="#path5" textLength="300">This is a pen.</textPath>
        </text>
      </g>
</svg>