Dear all,

I want to have a text rotated at 45º, vertically and horizontally aligned on an SVG.Coordinates are relative.

Here are my attempts.

First :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">
  <text font-family="Arial" font-size="3em" fill="red" x="50%" y="50%" text-anchor="middle" style="transform-origin: 50% 50%;transform-box: view-box;" dominant-baseline="central" transform="rotate(-45)" fill-opacity="0.5">TEXT</text>
</svg>
 

Second :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">
  <svg x="50%" y="50%" style="overflow:visible;">
    <text font-family="Arial" font-size="3em" fill="red" text-anchor="middle" dominant-baseline="central" transform="rotate(-45)" fill-opacity="0.5">TEXT</text>
  </svg>
</svg>
 

• Both First and Second render correctly on a browser (Chrome and Firefox, have not tried other).
• First does not renders correctly on Inkscape but Second does.
• When exporting Second to PDF from Inkscape, the text is cropped (Apparently the overflow property is ignored).

Can somebody helps me to solve my problem?I am kind of stuck and would like to avoid to have to use a browser based exporter...

Thanks in advance,

https://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg

Dear Maren,

Thank you for your answer.

It does not seems to be possible to set cx/cy in the rotation in mm or %.

Or maybe I misunderstood what you wanted to point out!?

Regards,

I think a screenshot of the desired and wrong result would be helpful. I'm not sure why you're handcoding the SVG, either. As far as I know, relative positions are not part of the SVG specification, but you may want to double-check.

For pdf export, select to export the drawing, not the page. PDF export will otherwise always export the page area.

Dear Maren,

Moini

I'm not sure why you're handcoding the SVG, either. As far as I know, relative positions are not part of the SVG specification, but you may want to double-check.

I effectlively handcoded the SVG as Inkscape does not use relative coordinates.

Moini

For pdf export, select to export the drawing, not the page. PDF export will otherwise always export the page area.

The problem with my second approach is that apparently, the text is first rendered on 0,0 then moved to the center. The overflow propery being ignored, we can only see the chunk which is on the corner translated to the center.

Moini

think a screenshot of the desired and wrong result would be helpful

I attached the screenshots (For the second approach):

• expected.png : Expected result as seen in inkscape
• exported.png : Exported PDF, same result on Inkscape is overflow property is removed

Many thanks,

Regards,

Mmh. The difference between the pdf export and the appearance on-canvas could be a bug.

For the other stuff, I guess you have already found https://css-tricks.com/transforms-on-svg-elements/

which explains the differences between CSS and SVG transformations.

Your first example seems to mix SVG and CSS transforms, I think Inkscape is correct in not accepting the changed CSS transform origin for the SVG rotation. It also seems to ignore CSS transforms (at least in the 1.0 beta).

What I haven't tried is using a symbol, those can have an origin defined, and might work better with Inkscape than the svg-in-svg.