4

I have an SVG with some flowed text that has a hierarchy to it. My text currently looks like this:

actual

But I'm trying to make it so the second paragraph is fully indented some X units, like so:

enter image description here

I'm trying to achieve this using a flowRoot element which doesn't seem to be too well-documented. I've tried transforming the flowPara, surrounding it in a group and transforming that, adding an x attribute, and various other random attributes/styles.

The relevant flowRoot is as follows:

<flowRoot id="flowRoot5170" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve">
  <flowRegion id="flowRegion5172">
    <rect height="877.14288" id="rect5174" width="691.42859" x="25.714285" y="60.933632"/>
  </flowRegion>
  <flowPara id="flowPara5176">First Line</flowPara>
  <flowPara id="flowPara5178">Second Line really long line aligned with first ones</flowPara>
</flowRoot>

And the full SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg height="297mm" id="svg5162" inkscape:version="0.91 r13725" sodipodi:docname="test_inkscape.svg" version="1.1" viewBox="0 0 744.09448819 1052.3622047" width="210mm" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs5164"/>
  <sodipodi:namedview bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="375" inkscape:cy="520" inkscape:document-units="px" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1001" inkscape:window-maximized="1" inkscape:window-width="1680" inkscape:window-x="0" inkscape:window-y="23" inkscape:zoom="0.35" pagecolor="#ffffff" showgrid="false"/>
  <metadata id="metadata5167">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
    <flowRoot id="flowRoot5170" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve">
      <flowRegion id="flowRegion5172">
        <rect height="877.14288" id="rect5174" width="691.42859" x="25.714285" y="60.933632"/>
      </flowRegion>
      <flowPara id="flowPara5176">First Line</flowPara>
      <flowPara id="flowPara5178">Second Line really long line aligned with first ones</flowPara>
    </flowRoot>
  </g>
</svg>
  • The flow* elements are probably under-documented because they are for SVG 1.2, which is not finished. Unless you are exporting to a different format, you probably want to avoid flowing text in the first place, since it's hard to predict support in other viewers. – Scribblemacher Oct 23 '15 at 13:19
  • @Scribblemacher I did read that this is an Inkscape-specific implementation (which is unfortunate). Inkscape works fine since I'm converting from SVG to PDF/PNG in my application. – Lander Oct 23 '15 at 16:13
0

Use this:

<flowRoot id="flowRoot5170" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve">
    <flowRegion id="flowRegion5172">
        <rect height="877.14288" id="rect5174" width="691.42859" x="25.714285" y="60.933632"/>
    </flowRegion>
    <flowPara id="flowPara5176">First Line</flowPara>
    <flowPara id="flowPara5178">Second Line really long line aligned with first ones</flowPara>
</flowRoot>
  • @Luciano: I edited the post to reveal the hidden HTML. – Wrzlprmft Nov 22 '18 at 11:18
  • 1
    @Raja: Welcome to Graphic Design SE. Please edit your answer to elaborate why it works. – Wrzlprmft Nov 22 '18 at 11:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.