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>
2
  • 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. Oct 23, 2015 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, 2015 at 16:13

1 Answer 1

1

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>
2
  • @Luciano: I edited the post to reveal the hidden HTML.
    – Wrzlprmft
    Nov 22, 2018 at 11:18
  • 1
    @Raja: Welcome to Graphic Design SE. Please edit your answer to elaborate why it works.
    – Wrzlprmft
    Nov 22, 2018 at 11:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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