2016-04-21 9 views
2

Dies ist eine Aufnahme im Dunkeln, aber gibt es eine Möglichkeit, die Höhe der SVG-Höhe basierend auf der Höhe fo:block zu setzen?SVG Rect Höhe zum Anpassen fo: block height

Ich habe ein Design, bei dem der Client annimmt, dass die statische Grafik in einem fo:table-row skalieren kann, in dem Text verpackt wird. Die statische Grafik hat eine ganz bestimmte Form.

Ich versuche eine Lösung zu finden, um die Grafikhöhe basierend auf ihrer Elterngröße zu skalieren.

+1

Können Sie das konkretisieren? Befindet sich das Bild auf dem Block (d. H. Es befindet sich in einer Tabellenzelle in einem Block) oder auf der gesamten Tabellenzeile? Erklären Sie auch die gewünschte Skalierung in beide Richtungen (Sie geben die Größenskalierung an, was passiert mit der Breite?). Ist die Grafik ungleichmäßig skaliert oder? –

Antwort

2

Wenn Sie versuchen, ein skaliertes Hintergrundbild hinter einen Block in der Tabellenzelle zu stellen (Frage war unklar) ... können Sie dies mit RenderX XEP mit ihren Erweiterungen für Hintergrundbilder tun.

Siehe http://www.renderx.com/reference.html#Background_Image

Probe:

<fo:table> 
     <fo:table-column column-width="1in"/> 
     <fo:table-column column-width="1in"/> 
     <fo:table-column column-width="1in"/> 
     <fo:table-body> 
      <fo:table-row > 
       <fo:table-cell> 
        <fo:block background-repeat="no-repeat" background-position="center center" background-image="circles1.svg" rx:background-content-height="scale-to-fit" rx:background-content-width="scale-to-fit" rx:background-scaling="non-uniform">This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. </fo:block> 
       </fo:table-cell> 
       <fo:table-cell> 
        <fo:block background-repeat="no-repeat" background-position="center center" background-image="circles1.svg" rx:background-content-height="scale-to-fit" rx:background-content-width="scale-to-fit" rx:background-scaling="non-uniform">This is some flowing stuff. </fo:block> 
       </fo:table-cell> 
       <fo:table-cell> 
        <fo:block background-repeat="no-repeat" background-position="center center" background-image="circles1.svg" rx:background-content-height="scale-to-fit" rx:background-content-width="scale-to-fit" rx:background-scaling="non-uniform"> This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. This is some flowing stuff. </fo:block> 
       </fo:table-cell> 
      </fo:table-row> 
     </fo:table-body> 
    </fo:table> 

Ergebnis:

enter image description here