title: XSL-FO: How to prevent Instream foreign object from being trimmed?
body: <p>I am using Apache FOP to generate a PDF that contains an instream-foreign-object element whose content is a svg document.  I am having a problem where the leftmost edge is seemingly being trimmed off like so: <img src="https://i.stack.imgur.com/GbG5a.jpg" alt="enter image description here">    </p>
  
  <p>These images are placed in a table.  The size of each containing table cell is set by the width and height attributes in the SVG.  I have tried modifying the width values and explicitly setting overflow attributes to 'visible.'  None of which works.  I should say that when the app is run on a Windows machine this clipping does not occur, but on Linux this is seen.  I don't know if that's a problem or not as the W3C docs mention overflow can be handled differently based on OS.</p>
  
  <p>Included are the relevant parts of the XSL from the flow element as well as the template that applies the svg to the template.  Can anyone help?</p>
  
  <pre><code>&lt;fo:page-sequence id="chartsPage" master-reference="landscape"&gt;
                      &lt;fo:static-content flow-name="xsl-region-after"&gt;
                          &lt;xsl:apply-templates select="exports/export" /&gt;
                      &lt;/fo:static-content&gt;
                      &lt;fo:flow flow-name="xsl-region-body"&gt;
                          &lt;fo:block id="headersBlock" margin-top="0.5in" font-family="arial, helvetica, sans-serif" color="#5c068c" font-weight="bold" text-align="center"&gt;
                              &lt;xsl:apply-templates select="exports/export/headers"/&gt;
                          &lt;/fo:block&gt;
                          &lt;fo:block id="chartBlock" text-align="center"&gt;
                              &lt;fo:table&gt;
                                  &lt;fo:table-body&gt;
                                      &lt;fo:table-row&gt;
                                          &lt;xsl:apply-templates select="exports/export/charts/chart" /&gt;
                                      &lt;/fo:table-row&gt;
                                  &lt;/fo:table-body&gt;
                              &lt;/fo:table&gt;
                          &lt;/fo:block&gt;...&lt;/fo:flow&gt;
  </code></pre>
  
  <p>Here's the chart template element.  Each input chart element contains an svg document:</p>
  
  <pre><code>&lt;xsl:template match="chart"&gt;
      &lt;fo:table-cell&gt;
          &lt;fo:block width="{svg:svg/@width}px"&gt;
              &lt;fo:instream-foreign-object width="80%" content-width="scale-to-fit" content-height="100%" scaling="uniform"&gt;
                  &lt;svg:svg width="{svg:svg/@width}" height="{svg:svg/@height}"&gt;
                      &lt;xsl:copy-of select="svg:svg"/&gt;
                  &lt;/svg:svg&gt;
              &lt;/fo:instream-foreign-object&gt;
          &lt;/fo:block&gt;
      &lt;/fo:table-cell&gt;
  &lt;/xsl:template&gt;
  </code></pre>
  
  <p>Here is the svg for the above image.  Please note the image included in this post clipped out chart title and some other text.  They are appearing correctly in all cases.  I only attached the trouble spot.</p>
  
  <pre><code>&lt;svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400"&gt;
  &lt;defs&gt;
      &lt;clipPath id="highcharts-59"&gt;
          &lt;rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"/&gt;
      &lt;/clipPath&gt;
      &lt;clipPath id="highcharts-60"&gt;
          &lt;rect fill="none" x="0" y="0" width="757" height="210"/&gt;
      &lt;/clipPath&gt;
  &lt;/defs&gt;
  &lt;rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="800" height="400" stroke-width="0.000001"/&gt;
  &lt;g class="highcharts-grid" /&gt;
  &lt;g class="highcharts-grid" &gt;
      &lt;path fill="none" d="M 33 215.5 L 790 215.5" stroke="#C0C0C0" stroke-width="1" /&gt;
      &lt;path fill="none" d="M 33 145.5 L 790 145.5" stroke="#C0C0C0" stroke-width="1" /&gt;
      &lt;path fill="none" d="M 33 75.5 L 790 75.5" stroke="#C0C0C0" stroke-width="1" /&gt;
      &lt;path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0C0C0" stroke-width="1" /&gt;
  &lt;/g&gt;&lt;g class="highcharts-axis" &gt;
      &lt;path fill="none" d="M 789.5 285 L 789.5 290" stroke="#C0D0E0" stroke-width="1"/&gt;
      &lt;path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0D0E0" stroke-width="1"  visibility="visible"/&gt;
  &lt;/g&gt;&lt;g class="highcharts-axis" /&gt;
  &lt;g class="highcharts-series-group" &gt;
      &lt;g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;rect fill="#00569b" x="151" y="41" width="228" height="169" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/&gt;
      &lt;/g&gt;&lt;g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none"/&gt;
      &lt;g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;rect fill="#80abcd" x="378" y="31" width="228" height="179" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/&gt;
      &lt;/g&gt;&lt;g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none"/&gt;
      &lt;g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;path fill="none" d="M 0 0" stroke="black" stroke-width="5"   stroke-opacity="0.049999999999999996" transform="translate(1, 1)"/&gt;
          &lt;path fill="none" d="M 0 0" stroke="black" stroke-width="3"   stroke-opacity="0.09999999999999999" transform="translate(1, 1)"/&gt;
          &lt;path fill="none" d="M 0 0" stroke="black" stroke-width="1"   stroke-opacity="0.15" transform="translate(1, 1)"/&gt;
          &lt;path fill="none" d="M 0 0" stroke="#000000" stroke-width="2" /&gt;
      &lt;/g&gt;&lt;g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none"&gt;
          &lt;path fill="#000000" d="M 378.50000000000006 67.1 C 383.82800000000003 67.1 383.82800000000003 75.1 378.50000000000006 75.1 C 373.1720000000001 75.1 373.1720000000001 67.1 378.50000000000006 67.1 Z" stroke="#FFFFFF" stroke-width="0.000001"/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;text x="395" y="25" style="font-family:arial,helvetica,sans-serif;font-size:12px;color:#3e576f;font-weight:bold;fill:#3e576f;" text-anchor="middle" class="highcharts-title" &gt;
      &lt;tspan x="395"&gt;XXXXXXXX XXXXXX&lt;/tspan&gt;
  &lt;/text&gt;
  &lt;path fill="none" d="M 33 146 L 790 146" stroke="#000000" stroke-width="2" /&gt;
  &lt;g class="highcharts-legend"  transform="translate(353,295)"&gt;
      &lt;g  clip-path="url(#highcharts-59)"&gt;
          &lt;g&gt;
              &lt;g class="highcharts-legend-item"  transform="translate(8,3)"&gt;
                  &lt;path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#000000"/&gt;
                  &lt;path fill="#000000" d="M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z" stroke="#FFFFFF" stroke-width="0.000001"/&gt;
                  &lt;text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" &gt;
                      &lt;tspan x="21"&gt;U.S. Total&lt;/tspan&gt;
                  &lt;/text&gt;
              &lt;/g&gt;&lt;g class="highcharts-legend-item"  transform="translate(8,32)"&gt;
                  &lt;text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" &gt;
                      &lt;tspan x="21"&gt;Current&lt;/tspan&gt;
                  &lt;/text&gt;
                  &lt;rect rx="2" ry="2" fill="#80abcd" x="0" y="4" width="16" height="12" stroke-width="0.000001"  stroke="#80abcd"/&gt;
              &lt;/g&gt;&lt;g class="highcharts-legend-item"  transform="translate(8,61)"&gt;
                  &lt;text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" &gt;
                      &lt;tspan x="21"&gt;Previous&lt;/tspan&gt;
                  &lt;/text&gt;
                  &lt;rect rx="2" ry="2" fill="#00569b" x="0" y="4" width="16" height="12" stroke-width="0.000001"  stroke="#00569b"/&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/g&gt;&lt;g class="highcharts-axis-labels" &gt;
      &lt;text x="411.5" y="299" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:737px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"/&gt;
  &lt;/g&gt;&lt;g class="highcharts-axis-labels" &gt;
      &lt;text x="33" y="290" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end"&gt;
          &lt;tspan x="33"&gt;0.00%&lt;/tspan&gt;
      &lt;/text&gt;
      &lt;text x="33" y="220" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end"&gt;
          &lt;tspan x="33"&gt;20.00%&lt;/tspan&gt;
      &lt;/text&gt;
      &lt;text x="33" y="150" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end"&gt;
          &lt;tspan x="33"&gt;40.00%&lt;/tspan&gt;
      &lt;/text&gt;
      &lt;text x="33" y="80" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end"&gt;
          &lt;tspan x="33"&gt;60.00%&lt;/tspan&gt;
      &lt;/text&gt;
  &lt;/g&gt;&lt;g class="highcharts-tracker" &gt;
      &lt;g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;rect fill="rgb(192,192,192)" x="151" y="41" width="228" height="169" isTracker="1404735525027" fill-opacity="0.0001" visibility="visible" style=""/&gt;
      &lt;/g&gt;&lt;g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;rect fill="rgb(192,192,192)" x="378" y="31" width="228" height="179" isTracker="1404735525028" fill-opacity="0.0001" visibility="visible" style=""/&gt;
      &lt;/g&gt;&lt;g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)"&gt;
          &lt;path fill="none" d="M 368.50000000000006 71.1 L 388.50000000000006 71.1" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks,</p>
  
  <p>Brandt</p>