Oxygen XML Forum

Posted: **Tue May 08, 2018 7:41 pm**

Hi, I'm using DITA-PDF (WYSISYG) transformation with CSS via PDF chemistry.
I want my logo to be at the top center of the front page.
For better quality I want to use .svg object, not a regular image.

The issue is that it does not work for svg, object is always at the top-left position:

Code: Select all

@page front-page {

  @top-left-corner {

    content: none

  }

  @top-left {

    content: none

  }

  @top-center {

    content: url("..\img\my-logo.svg");

    margin: auto;

    display:block;

  }

Though it is ok for images:

Code: Select all

@page front-page {

  @top-left-corner {

    content: none

  }

  @top-left {

    content: none

  }

  @top-center {

    content: url("..\img\my-logo.png");

    margin: auto;

    display:block;

  }

How can I center svg?

Posted: **Wed May 09, 2018 8:59 am**

Hello Anna,

Your CSS is good, it works for me when I refer a small-size SVG sample. Can you send us an SVG that exhibits the problem? You can use the technical support form.

The lines:

Code: Select all


  margin: auto;

  display:block;

are not necessary, the content of a @top-center page margin box has the property "text-align" set to "center".

Another way of using an image is to set it as a background image of the page:

Code: Select all


@page front-page {

  background-image:url("some.svg");

  background-position:50% 5%; /* the first is the alignement on the X axis, the second, on Y.*/

  background-repeat:no-repeat;

  

  @top-left-corner {

  .....

  }

  ....

 }

Best regards,
Dan

Posted: **Wed May 16, 2018 6:22 pm**

Hi,

Thanks for the tip. First way works okay with small images (<300 px) but is not applicable for the bigger ones.

Oxygen XML Forum

SVG obhect centering issue

SVG obhect centering issue

Re: SVG obhect centering issue

Re: SVG object centering issue