Search code examples
svgapache-fopbatik

TextPath not rendered in PDF using Apache FOP

I am using Apache FOP to generate PDFs, some pages require SVGs. For the most part, this works fine until I add the TextPath element. I am using this to get curved text. This SVG works in browsers but not in the PDF. Wikipedia shows Batik (the SVG renderer for Apache FOP) is compatible with TextPath: https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics). But no luck.

Any help on this would be appreciated. Note: I am intentionally trying to add text instead of a rasterized images as the text is being localized and injected in.

Here is a sample of an svg which can be found here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath href="#MyPath"> <!-- works if I remove this line -->
      Quick brown fox jumps over the lazy dog.
    </textPath> <!-- and this line -->
  </text>

</svg>
Solution

  • According to the SVG 1.1 recommendation, xlink:href should be used to reference the path element. See https://www.w3.org/TR/SVG11/text.html#TextPathElement.

    The following image displays in the Squiggle GUI (Batik 1.12), Firefox and Chrome.

    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                           xmlns:xlink="http://www.w3.org/1999/xlink">

  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath xlink:href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>