J'utilise Apache FOP pour générer un PDF quicontient un élément instream-Foreign-object dont le contenu est un document svg. J'ai un problème où le bord le plus à gauche est apparemment coupé comme ceci: 
Ces images sont placées dans un tableau. La taille de chaque cellule de tableau contenant est définie par les attributs de largeur et de hauteur dans le SVG. J'ai essayé de modifier les valeurs de largeur et de définir explicitement les attributs de débordement sur «visible». Aucun de qui fonctionne. Je dois dire que lorsque l'application est exécutée sur une machine Windows, cet écrêtage ne se produit pas, mais sous Linux, cela se voit. Je ne sais pas si c'est un problème ou non, car les documents du W3C mentionnent que le débordement peut être géré différemment en fonction du système d'exploitation.
Les parties pertinentes de la XSL de l'élément de flux ainsi que le modèle qui applique le svg au modèle sont inclus. Quelqu'un peut-il aider?
<fo:page-sequence id="chartsPage" master-reference="landscape">
<fo:static-content flow-name="xsl-region-after">
<xsl:apply-templates select="exports/export" />
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<fo:block id="headersBlock" margin-top="0.5in" font-family="arial, helvetica, sans-serif" color="#5c068c" font-weight="bold" text-align="center">
<xsl:apply-templates select="exports/export/headers"/>
</fo:block>
<fo:block id="chartBlock" text-align="center">
<fo:table>
<fo:table-body>
<fo:table-row>
<xsl:apply-templates select="exports/export/charts/chart" />
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>...</fo:flow>
Voici l'élément de modèle de graphique. Chaque élément de graphique d'entrée contient un document svg:
<xsl:template match="chart">
<fo:table-cell>
<fo:block width="{svg:svg/@width}px">
<fo:instream-foreign-object width="80%" content-width="scale-to-fit" content-height="100%" scaling="uniform">
<svg:svg width="{svg:svg/@width}" height="{svg:svg/@height}">
<xsl:copy-of select="svg:svg"/>
</svg:svg>
</fo:instream-foreign-object>
</fo:block>
</fo:table-cell>
</xsl:template>
Voici le svg pour l'image ci-dessus. Veuillez noter l'image incluse dans ce titre du graphique découpé et un autre texte. Ils apparaissent correctement dans tous les cas. J'ai seulement attaché le point problématique.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400">
<defs>
<clipPath id="highcharts-59">
<rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"/>
</clipPath>
<clipPath id="highcharts-60">
<rect fill="none" x="0" y="0" width="757" height="210"/>
</clipPath>
</defs>
<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="800" height="400" stroke-width="0.000001"/>
<g class="highcharts-grid" />
<g class="highcharts-grid" >
<path fill="none" d="M 33 215.5 L 790 215.5" stroke="#C0C0C0" stroke-width="1" />
<path fill="none" d="M 33 145.5 L 790 145.5" stroke="#C0C0C0" stroke-width="1" />
<path fill="none" d="M 33 75.5 L 790 75.5" stroke="#C0C0C0" stroke-width="1" />
<path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0C0C0" stroke-width="1" />
</g><g class="highcharts-axis" >
<path fill="none" d="M 789.5 285 L 789.5 290" stroke="#C0D0E0" stroke-width="1"/>
<path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0D0E0" stroke-width="1" visibility="visible"/>
</g><g class="highcharts-axis" />
<g class="highcharts-series-group" >
<g class="highcharts-series" visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<rect fill="#00569b" x="151" y="41" width="228" height="169" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/>
</g><g class="highcharts-markers" visibility="visible" transform="translate(33,75)" clip-path="none"/>
<g class="highcharts-series" visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<rect fill="#80abcd" x="378" y="31" width="228" height="179" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/>
</g><g class="highcharts-markers" visibility="visible" transform="translate(33,75)" clip-path="none"/>
<g class="highcharts-series" visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<path fill="none" d="M 0 0" stroke="black" stroke-width="5" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"/>
<path fill="none" d="M 0 0" stroke="black" stroke-width="3" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"/>
<path fill="none" d="M 0 0" stroke="black" stroke-width="1" stroke-opacity="0.15" transform="translate(1, 1)"/>
<path fill="none" d="M 0 0" stroke="#000000" stroke-width="2" />
</g><g class="highcharts-markers" visibility="visible" transform="translate(33,75)" clip-path="none">
<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"/>
</g>
</g>
<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" >
<tspan x="395">XXXXXXXX XXXXXX</tspan>
</text>
<path fill="none" d="M 33 146 L 790 146" stroke="#000000" stroke-width="2" />
<g class="highcharts-legend" transform="translate(353,295)">
<g clip-path="url(#highcharts-59)">
<g>
<g class="highcharts-legend-item" transform="translate(8,3)">
<path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#000000"/>
<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"/>
<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" >
<tspan x="21">U.S. Total</tspan>
</text>
</g><g class="highcharts-legend-item" transform="translate(8,32)">
<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" >
<tspan x="21">Current</tspan>
</text>
<rect rx="2" ry="2" fill="#80abcd" x="0" y="4" width="16" height="12" stroke-width="0.000001" stroke="#80abcd"/>
</g><g class="highcharts-legend-item" transform="translate(8,61)">
<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" >
<tspan x="21">Previous</tspan>
</text>
<rect rx="2" ry="2" fill="#00569b" x="0" y="4" width="16" height="12" stroke-width="0.000001" stroke="#00569b"/>
</g>
</g>
</g>
</g><g class="highcharts-axis-labels" >
<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"/>
</g><g class="highcharts-axis-labels" >
<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">
<tspan x="33">0.00%</tspan>
</text>
<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">
<tspan x="33">20.00%</tspan>
</text>
<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">
<tspan x="33">40.00%</tspan>
</text>
<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">
<tspan x="33">60.00%</tspan>
</text>
</g><g class="highcharts-tracker" >
<g visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<rect fill="rgb(192,192,192)" x="151" y="41" width="228" height="169" isTracker="1404735525027" fill-opacity="0.0001" visibility="visible" style=""/>
</g><g visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<rect fill="rgb(192,192,192)" x="378" y="31" width="228" height="179" isTracker="1404735525028" fill-opacity="0.0001" visibility="visible" style=""/>
</g><g visibility="visible" transform="translate(33,75)" clip-path="url(#highcharts-60)">
<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=""/>
</g>
</g>
Merci,
Brandt
Réponses:
2 pour la réponse № 1Je crois connaître le problème et cela explique probablementla différence apparente dans OS. Highcharts a probablement calculé toutes les positions en fonction de la taille de la police qui provient de la police réelle utilisée. Les étiquettes de l'axe des x sont positionnées à 33 ancrées à droite. Vous formatez que dans deux instances différentes de FOP, l'une a la même police Highcharts utilisée ou une similaire. L'un a une police plus grande mais correspond toujours au choix de police sur le texte (voir la liste des polices dans le SVG). Le plus grand entraîne une durée de texte légèrement plus longue, supérieure à 33.
Ma conjecture basée sur la liste de polices est que Windowsutilisé Verdana et Linux utilisé Helvetica. Vérifiez ceci et assurez-vous que vous avez les mêmes polices sur toutes les plates-formes ou définissez une zone de visualisation dans le svg qui est légèrement plus grande avec neg x.
En testant ma supposition, voici votre SVG deux fois dansmême sortie. J'ai seulement changé la sélection de police dans le SVG pour forcer différentes polices. Vous pouvez voir la différence. La police de votre environnement "découpé" est probablement plus grande que celle utilisée pour déterminer l'espacement dans le SVG.
Pour prouver ce point dans les commentaires ci-dessous, en utilisant vousSVG exact Je viens d'ajouter plus de caractères (simulant une plus grande largeur de police). Vous voyez, j'ai mis le mot "CUTOFFF" et il est coupé. Il ne changerait pas "après" il est calculé par Highchart et toute mise à l'échelle que vous faites dans FO est sans signification. Le texte est en dehors du SVG.
