Is it possible to vertically align the bottom of a referenced image to the bottom of the page, so that if either image is resized it will stay at the bottom?

<image xlink:href="foo.svg" x="0" align="page-bottom" />

1 answer


Got halfway to the solution - At least the image will stay in the same spot when changing the scale using this method:

<!-- Specify 2mm margins inside existing page (59.4x210mm, 1/5 of A4) -->
<svg x="2mm" y="2mm" width="55.4mm" height="206mm">
  <!-- Full-size canvas below and to the right -->
  <svg x="55.4mm" y="206mm" width="100%" height="100%">
    <!-- Rotate back into page -->
    <g width="100%" height="100%" transform="rotate(180)">
      <!-- Rotate around center (120x42px image) -->
      <image xlink:href="cc-by.svg" transform="rotate(180 60 21)"/>

The current issues:

  • Have to know pixel size of the referenced image to rotate around the center (50% doesn't work in transforms)
  • The two containers should ideally be one, but @transform doesn't work on <svg>, and @x,@y don't work on <g>
  • Ugly :/
Answered over 6 years ago by Victor Engmark