SVG obhect centering issue

Questions about XML that are not covered by the other forums should go here.
anna_craneo
Posts: 30
Joined: Tue Feb 20, 2018 2:51 pm

SVG obhect centering issue

Post by anna_craneo » 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?

Dan
Posts: 430
Joined: Mon Feb 03, 2003 10:56 am

Re: SVG obhect centering issue

Post by Dan » 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

anna_craneo
Posts: 30
Joined: Tue Feb 20, 2018 2:51 pm

Re: SVG object centering issue

Post by anna_craneo » 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.

Post Reply