svg-net / SVG

Fork of the ms svg library
http://svg-net.github.io/SVG/
Microsoft Public License
1.18k stars 475 forks source link

text-anchor:middle/end not rendering on draw #431

Open JKBSunshine opened 5 years ago

JKBSunshine commented 5 years ago

It was working fine before the fix for Issue 385, but now text anchors for middle and end do not work when rendered.

SVG file: image

PNG file after .draw (gray background added so you can see the white text): image

Based on the changes made in the fix, it seems like: A) _anchoredPaths isn't being added to as expected B) TextBounds.Width isn't calculating as expected or C) my SVG isn't proper in some way that makes it get interpreted wrong

C is always a possibility, though I've no clue what would be wrong in it or why. B seems the most likely though, since it seems like the textwidth is calculating to approximately 0 somehow.

Text Anchor Issue Example.zip

mrbean-bremen commented 5 years ago

I have trouble to reproduce the problem. First, the image could not be displayed in any browser due to missing svg namespace. After I added that, it did not show up because it was way too big. This may be intended, but makes the comparison with the display in a browser difficult (which is basically the standard for SVG display). After making it small enough to show up in a browser (by proportionally reducing all sizes), it also displayed correctly in the SVG viewer. I will try to get a version that reproduces the problem later, or it would be helpful if you had a version that correctly displays in a browser, but not if drawing it using SVG.

JKBSunshine commented 5 years ago

It is intended to be large, though I can tone down examples from here on out. Both with and without xmlns="http://www.w3.org/2000/svg", the SVG displays correctly in the viewer for me, it just doesn't render properly when using the svgdocument.draw function because the text-anchor isn't taken into account properly. It used to before the aforementioned fix in December. Are you saying that you can get it to do the .draw properly? What do I add to make that show up right?

Thanks for the fast response by the way!

mrbean-bremen commented 5 years ago

No, I just did a quick test using the SVGViewer, as it also uses SvgDocument.Draw(). But this is isn't an adequate test, obviously - I will have a closer look later...

JKBSunshine commented 5 years ago

Seems like font-weight isn't showing right for me after SvgDocument.Draw() either... so it's not specific to alignment.

mrbean-bremen commented 5 years ago

Hm, I'm still not sure how to reproduce this. The SVGViewer basically does:

  SvgDocument svgDoc = SvgDocument.Open(openSvgFile.FileName);
  svgImage.Image = svgDoc.Draw();

Isn't this the same what you are doing?

JKBSunshine commented 5 years ago

Uh, looks like I [sorta] solved the problem. When I was looking for potential causes that might not be due to the extension, I found something about how bold doesn't work when a font is too small. When I take the original SVG I sent and shrink all of the numbers down by a factor of 12, it looks fine when drawn by the extension. But while inkscape and chrome display the SVG just fine even when sized up, the extension struggles with it somehow. There's actually a sign of it occuring before .draw(); looking at the properties of the SvgDocument after using .Open(filename), the width of the document is wider than intended by the black rectangle that acts as the background by a significant amount, which is likely caused by the text going off the right edge. If you were to use an explicit width rather than 100%, it would stay the right size but the text would be cut off since it's still not being centered.

So I guess the issue is that at a certain point stuff is a bit large for the engine to handle or something along those lines? And maybe it's doing that only for me for some reason? I could mess around with it a bit more and see where the limit really is if you want.

Examples: Large Arial in Inkscape: image

Large Arial width bound when it goes to open the SVG file: 10292 image

Large Arial.png: image

Small Arial in Inkscape: image

Small Arial width bound when it goes to open the SVG file; 672.5 image

Small Arial.png: image

For reference, large arial is a 8064 x 4800 SVG using 1536 size font. Small arial is 672 x 400 using 128 size font. Attached are both SVG files.

ArialSmallLarge.zip

mrbean-bremen commented 5 years ago

Thanks for delving into this!

When I take the original SVG I sent and shrink all of the numbers down by a factor of 12, it looks fine when drawn by the extension.

This is basically what I did to test it (my notebook screen isn't very large, and I usually make small reference images for testing) - so no wonder I couldn't reproduce it. I will have another look some time later with the large data. Based on other problems I would guess that the limitation is somewhere in GDI+, which is used for drawing by .NET - it would not be the first time. In this case fixing it would at least be difficult, if possible at all. But I may be wrong, and there is some limitation in the SVG.NET code itself.

JKBSunshine commented 5 years ago

Worth noting (for you or for anyone that has this issue in the future, should this not be fixable) that this issue can be circumvented by reducing the font size (and the x/y coords) by a factor of 12 as previously mentioned, and then enclosing the text in a group with transform="scale(12)". It renders correctly that way.