text-anchor not correctly computed

[frankb33]

I have to admit that I'm a total svg-newbie. For some reasons I want to use a scoreboard like this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400" width="200" height="400">
  <!-- Scoreboard Body -->
  <rect x="40" y="20" width="120" height="360" rx="10" ry="10" fill="#202020" />

  <!-- Top Number Card -->
  <rect x="50" y="30" width="100" height="100" rx="10" ry="10" fill="#fff" />
  <text x="100" y="100" font-size="60" font-weight="bold" text-anchor="middle" fill="#000" transform="rotate(90 100 80)">1</text>

  <!-- Middle Number Card -->
  <rect x="65" y="150" width="80" height="80" rx="10" ry="10" fill="#4040CC" />
  <text x="100" y="200" font-size="60" font-weight="bold" text-anchor="middle" fill="#fff" transform="rotate(90 100 190)">7</text>

  <!-- Bottom Number Card -->
  <rect x="50" y="250" width="100" height="100" rx="10" ry="10" fill="#fff" />
  <text x="100" y="320" font-size="60" font-weight="bold" text-anchor="middle" fill="#000" transform="rotate(90 100 300)">2</text>
</svg>

when I use single digit numbers everything is nicely centered, if I use 2 digit numbers it is displaced with jsvg but well aligned with e.g. Xview or FireFox on Linux, see here:

edit: somehow the svg-code isn't displayed so I appended it additionally

[weisJ]

Which version of the library are you using. How are you rendering the svg. I just tried the svg above and it displays fine for me:

[frankb33]

Thanks for your quick reponse. I tried 1.2.0 and 1.7.0. Withe single digit numbers it is fine here too, but with 2 digit numbers ie.g. 14 25 18 the numbers are shift to the right.

The code looks like
` BufferedImage image;
private SVGLoader loader = new SVGLoader()

InputStream stream = new ByteArrayInputStream(template.getBytes('UTF-8'))
    
SVGDocument diagram = loader.load(stream)

int h     = diagram.size().height;
int w     = diagram.size().width;
float scale = 1.0;
    
BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);

Graphics2D ig2 = img.createGraphics();
ig2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
ig2.scale(scale, scale);
diagram.render(null, ig2);
ig2.dispose();
return img;    ` 

[weisJ]

Note that you are relying on default values for the used fonts. Those can vary between renderers. To ensure reproducible results you should always specifically set the font-family to a value of which you are sure you have the font installed.

Would you mind sharing an image about the discrepancies you are encountering? Without it is hard to judge what is going wrong on your end. I am aware of a small issue with the way the anchor is handled but I'm not sure whether this is even the issue here.

[frankb33]

o.k. that helps. I added font-family="Sans,Arial" and the alignment is centered now. Thanks a lot.

As I mentioned, I know little more than nothing about svg and not expecting you to answer in lightning speed ;) I tried out svgSalamander which I used before (flatLaf switched from svgSalamander to jsvg so I followed) renders the exact same picture with/without font family.

BTW the 2nd picture I added (with 11 25 18) is an example of not centered (the 25 shows it best that left and right border are unequal)

[weisJ]

o.k. that helps. I added font-family="Sans,Arial" and the alignment is centered now. Thanks a lot.

Glad I could help.

BTW the 2nd picture I added (with 11 25 18) is an example of not centered (the 25 shows it best that left and right border are unequal)

Ok looking at the second picture a bit closer I think this might actually be related to the issue I was thinking off. Let me look into how this can be mitigated.