How can I keep my content from being cutoff with apache fop?

Question

I am going through the Apache FOP quickstart. From the command line I am converting a simple xml file that contains an svg element and converting it to a pdf file. I am able to do this, but the image generated by the svg is being cut off. I am new to XSL-FO & Apache FOP, but I did check out the w3c documentation of properties. Now I'm even more confused, unfortunately. I have tried the following with no luck: altering the width & height properties in the svg itself; setting page-height & page-width to "auto" in the simple page master element; eliminating the margin property. I didn't see anything indicating the region-body starts with some default size.

Here is the xml:

<chart>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <circle cx="100" cy="100" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>

And here's the xsl:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <xsl:output method="xml" indent="yes"/>
  <xsl:template match="/">
    <fo:root>
      <fo:layout-master-set>
        <fo:simple-page-master master-name="A4-portrait"
              margin="10">
          <fo:region-body/>
        </fo:simple-page-master>
      </fo:layout-master-set>
      <fo:page-sequence master-reference="A4-portrait">
        <fo:flow flow-name="xsl-region-body">
          <fo:block>
            <fo:instream-foreign-object xmlns:svg="http://www.w3.org/2000/svg" content-width="600" content-height="300">
                <svg:svg>
                    <xsl:copy-of select="/chart/svg:svg"/>
                </svg:svg>
            </fo:instream-foreign-object>
          </fo:block>         
        </fo:flow>
      </fo:page-sequence>
    </fo:root>
  </xsl:template>
</xsl:stylesheet>

The image is supposed to show a red & green circle overlapping, but it's only showing the upper left corner of the green one. I expect there's a property in the block element I am missing, but I don't know which. I looks like the block is limited to a 100px x 100px size.

What am I missing of the properties and how can I get the whole svg image to show properly (two full circles overlapping)?

Thanks,

Brandt

PS: I would have sent an image showing the problem, but I don't have a high enough reputation.

Without even testing ... I see this: content-width="600" content-height="300" 300 what? pts, inches, miles ... — Kevin Brown
To be totally technical, the SVG you present has a height set to 100. It has a green circle whose center point starts at 100,100 and has a radius of 40. you would never see the bottom half of the circle, ever. — Kevin Brown

Kevin Brown Kevin Brown · Accepted Answer · 2013-09-30T02:57:46

Errors are the specification of size with no units in FO in three places (margin, content-width and content-height). Also the SVG as stated in the comment above has a height of 100 which exceeds half of the green circle.

Correcting these and showing just the FO:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
        <fo:layout-master-set>
            <fo:simple-page-master master-name="A4-portrait">
                <fo:region-body/>
            </fo:simple-page-master>
        </fo:layout-master-set>
        <fo:page-sequence master-reference="A4-portrait">
            <fo:flow flow-name="xsl-region-body">
                <fo:block>
                    <fo:instream-foreign-object xmlns:svg="http://www.w3.org/2000/svg">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="200">
                            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
                            <circle cx="100" cy="100" r="40" stroke="black" stroke-width="2" fill="green" />
                        </svg>
                    </fo:instream-foreign-object>
                </fo:block>         
            </fo:flow>
        </fo:page-sequence>
    </fo:root>

This shows the complete SVG image in your output.

How can I keep my content from being cutoff with apache fop?

1 Answers