Forum How do I...?

SVG-support for textPath?

somebee
Hi. I'm considering Prince for a project now, where I need to be able to draw charts in the pdf (svg, created with/by EJSChart - a js library).

The chart itselfs shows up in the pdfs, but none of the axis-labels etc.. This is how the svg looks:

CODE IN NEXT POST, was not allowed to post links since its my first post.

I'm wondering, does not prince support textPath-elements? If so, are there any way I can transform than svg to work with prince?

Other than that, _great_ product. I'm having a grand time trying it out :D
somebee
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="864" height="250" viewBox="0 0 864 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="textPath__chart_0" d="M20,210 L20,0"/>
<path id="textPath__chart_1" d="M-5,157.5 L7,157.5"/>
<path id="textPath__chart_2" d="M-5,97.5 L7,97.5"/>
<path id="textPath__chart_3" d="M-5,37.5 L7,37.5"/>
<path id="textPath__chart_4" d="M13,245 L854,245"/>
<path id="textPath__chart_5" d="M-16,221.5 L41,221.5"/>
<path id="textPath__chart_6" d="M77,231.5 L134,231.5"/>
<path id="textPath__chart_7" d="M171,221.5 L228,221.5"/>
<path id="textPath__chart_8" d="M264,231.5 L321,231.5"/>
<path id="textPath__chart_9" d="M358,221.5 L415,221.5"/>
<path id="textPath__chart_10" d="M451,231.5 L508,231.5"/>
<path id="textPath__chart_11" d="M545,221.5 L602,221.5"/>
<path id="textPath__chart_12" d="M638,231.5 L695,231.5"/>
<path id="textPath__chart_13" d="M732,221.5 L789,221.5"/>
<path id="textPath__chart_14" d="M840,229 L867,229"/>
<path id="textPath__chart_15" d="M844,0 L844,210"/>
<path id="textPath__chart_16" d="M860,157.5 L872,157.5"/>
<path id="textPath__chart_17" d="M860,97.5 L872,97.5"/>
<path id="textPath__chart_18" d="M860,37.5 L872,37.5"/>
</defs>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M13,0 L13,210 "/>
<path style="fill:none; opacity:1; stroke:#e6e6e6; stroke-width:1;" d=" M13,155 L854,155 M13,96 L854,96 M13,36 L854,36 "/>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M13,155 L9,155 M13,96 L9,96 M13,36 L9,36 "/>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M13,210 L854,210 "/>
<path style="fill:none; opacity:1; stroke:#e6e6e6; stroke-width:1;" d=" M13,210 L13,0 M106,210 L106,0 M200,210 L200,0 M293,210 L293,0 M387,210 L387,0 M480,210 L480,0 M574,210 L574,0 M667,210 L667,0 M761,210 L761,0 M854,210 L854,0 "/>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M13,210 L13,214 M106,210 L106,224 M200,210 L200,214 M293,210 L293,224 M387,210 L387,214 M480,210 L480,224 M574,210 L574,214 M667,210 L667,224 M761,210 L761,214 M854,210 L854,214 "/>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M854,0 L854,210 "/>
<path style="fill:none; opacity:1; stroke:#cccccc; stroke-width:1;" d=" M854,155 L858,155 M854,96 L858,96 M854,36 L858,36 "/>
<path style="fill:none; opacity:1; stroke:#96b8d3; stroke-width:1;" d=" M854,NaN "/>
<path style="fill:none; opacity:1; stroke:#cdab42; stroke-width:1;" d=" M13,179 L25,179 L49,173 L72,173 L95,173 L118,167 L142,161 L165,161 L188,161 L212,161 L235,161 L258,167 L282,167 L305,173 L328,173 L352,161 L375,167 L398,173 L422,173 L445,173 L468,161 L491,155 L515,143 L538,143 L561,143 L585,143 L608,143 L631,143 L655,137 L678,131 L701,137 L725,143 L748,143 L771,143 L795,143 L818,143 L841,143 L854,143 "/>
<path style="fill:#ffffff; opacity:1; stroke:none; stroke-width:0;" d=" M0,0 L13,0 L13,210 L0,210 L0,0 "/>
<path style="fill:#ffffff; opacity:1; stroke:none; stroke-width:0;" d=" M13,210 L854,210 L854,250 L13,250 L13,210 "/>
<path style="fill:#ffffff; opacity:1; stroke:none; stroke-width:0;" d=" M854,0 L864,0 L864,210 L854,210 L854,0 "/>
<text style="font-size:12px;font-family:Arial;font-weight:bold;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_0"></textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_1">50</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_2">60</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_3">70</textPath></text>
<text style="font-size:12px;font-family:Arial;font-weight:bold;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_4"></textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_5">03.07 11:28</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_6">03.07 15:29</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_7">03.07 19:29</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_8">03.07 23:30</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_9">04.07 03:30</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_10">04.07 07:31</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_11">04.07 11:31</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_12">04.07 15:32</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_13">04.07 19:32</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_14">04.07 23:33</textPath></text>
<text style="font-size:12px;font-family:Arial;font-weight:bold;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_15"></textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_16">50</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_17">60</textPath></text>
<text style="font-size:10px;font-family:Arial;font-weight:normal;font-style:normal;fill:#000000;"><textPath text-anchor="middle" startOffset="50%" xlink:href="#textPath__chart_18">70</textPath></text>
</svg>
mikeday
Prince does not support textPath at this time. However, if the text labels are in a straight line, then it may be possible to just use regular text elements and a transformation to position and rotate them as necessary.
Alex McKee
I've just run up against this lack of textPath support. I read on another thread that improvements to SVG handling are planned for Prince 7.1, could you please consider implementing textPath support?
mikeday
Sure, we'll add this to the roadmap.
Alex McKee
Many thanks Mike, and thank you also for the quick reply!
AndyH
Hi Prince,

Just wanted to add a strong vote for the text-on-a-path feature; we currently build our own dynamic SVGs on-the-fly and using curved text (for pie headings) is essential to the design (when I say dynamic, I mean that there could be any number of pie slices, these could be grouped in any combination of parents (which form a pie-slice-spanning "crust"), and the whole thing has to work in multiple languages.

We're not using Prince at this moment but are seriously considering it; there are many advantages to Prince over our existing FO solution but not having text-on-a-path is almost a show stopper for us.

Thanks,

Andy
mikeday
We will take another look at this and see if we can move it up the roadmap.
mikeday
Prince 10 is now available, and includes support for SVG textPath. Thank you for your patience. :)