Auto line-wrapping in SVG text

Auto line-wrapping in SVG text

Asked on January 3, 2019 in XML.
Add Comment


  • 3 Answer(s)

         The text wrapping is not part of SVG1.1 and currently initialized. Use HTML through the <foreignObject/> element rather than that.

    <svg ...>
     
    <switch>
    <foreignObject x="20" y="90" width="150" height="200">
    <p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
    </foreignObject>
     
    <text x="20" y="20">Your SVG viewer cannot display html.</text>
    </switch>
     
    </svg>
    

     

    Answered on January 3, 2019.
    Add Comment

    Auto line-wrapping in SVG text:

    <svg ...>
      <switch>
        <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
          <textArea width="200" height="auto">
           Text goes here
          </textArea>
        </g>
        <foreignObject width="200" height="200"
         requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
          <p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
        </foreignObject>
        <text x="20" y="20">No automatic linewrapping.</text>
      </switch>
    </svg>
    

         There is noting even although foreignObject may be reported as being supported with that featurestring, and there will be no guarantee that HTML can be showed because that is not required by the specification of SVG 1.1. There will no featurestring for html-in-foreignobject support at the moment. In spite of that it is still supported in more browsers, so it is likely to become required in the future, feasibly with a corresponding featurestring.

    The ‘textArea’ element in SVG small 1.2 will supports the whole standard svg features, and that we can specify either of width or height as auto, meaning that the text can flow by free in that direction. ForeignObject will acts as clipping viewport.

    The above example is valid SVG 1.1 content, in SVG 2 the ‘requiredFeatures’ attribute has been removed, which means the ‘switch’ element will try to furnish the first ‘g’ element crude of having support for SVG 1.2 ‘textArea’ elements.

    Answered on January 3, 2019.
    Add Comment

    The textPath will be fair by the following codes:

    <svg width="200" height="200"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <!-- define lines for text lies on -->
        <path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"></path>
      </defs>
      <use xlink:href="#path1" x="0" y="35" stroke="blue" stroke-width="1" />
      <text transform="translate(0,35)" fill="red" font-size="20">
        <textPath xlink:href="#path1">This is a long long long text ......</textPath>
      </text>
    </svg>
    
    Answered on January 3, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.