Forum How do I...?

SVG textPath on inner circle

twantzen
Hi,

I tried to make a SVG path with textPath, where the text sits inside the circle (not on the outside). I thought the textPath attribute side="right" would do the job, and it does so in Firefox as shown in "Browser-Output.png". But in Chrome, Safari, and PrinceXML it doesn't work.

Does anyone has a hint for me, what to do, to get PrinceXML to output it like I want to (as shown in "Browser-Output.png")?

Thanks a lot!
Tobias
  1. Browser-Output.png59.2 kB
  2. Prince-Output.pdf11.9 kB
  3. index.html5.7 kB
wangp
The textPath 'side' attribute was introduced in SVG 2, and is only supported by Firefox so far.
To get the same effect without side="right" you'll need to reverse the path. For your example you'll want
d="M 462,256 a 206,206 0 1 0 -412,0 a 206,206 0 1 0 412,0"
then use text-anchor="end" and startOffset="50%" to align the end of the text with the midpoint of the circle path.
twantzen
@wangp Thank you very much, that worked perfectly.

Do we have a PrinceXML documentation of all supported SVG tags and attributes? I searched for it, but wasn't able to find one.

Thanks,
Tobias
csant
Do we have a PrinceXML documentation of all supported SVG tags and attributes? I searched for it, but wasn't able to find one.


Not a list of all supported tags and attributes - however, the documentation mentions that Prince supports SVG 1.1, and then lists the elements and attributes currently not supported.
twantzen
@csant Thank you, I missed that.