Text doesn't render in correct location

[wendux]

Thanks your job! I find a problem of this library. When I load the follow svg file from network, it doesn't work. svg link: https://camo.githubusercontent.com/956078561b010d309faad6f271afede2344f556f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d666c757474657225374364617274253230766d2d6666363962342e7376673f7374796c653d666c61742d737175617265

The file content is:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="20">
 <g shape-rendering="crispEdges">
   <path fill="#555" d="M0 0h57v20H0z"/>
   <path fill="#ff69b4" d="M57 0h93v20H57z"/>
 </g>
 <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
   <text x="295" y="140" transform="scale(.1)" textLength="470">platform</text>
   <text x="1025" y="140" transform="scale(.1)" textLength="830">flutter|dart vm</text>
 </g> 
</svg>

when I change the content to:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="20" viewBox="0 0 150 20">
      <g shape-rendering="crispEdges">
       <path fill="#555" d="M0 0h57v20H0z"/>
       <path fill="#ff69b4" d="M57 0h93v20H57z"/>
      </g>
      <g fill="#fff" text-anchor="start" font-family="Verdana" font-size="11">
      <text x="5" y="14" textLength="47">platform</text>
      <text x="70" y="14"  textLength="83">flutter|dart vm</text>
     </g>
 </svg>

I use SvgPicture.string to render the widget with above code, it works, but But the relationship among x,y,textLength and transform is not clear.

[dnfield]

Text support is not great at this point. I'll take a look but it's likely due to that.

[dnfield]

Yes, this is entirely due to the x/y stuff for text. It's not very well supported at this point and I'm not sure if/when it will be (the logic to properly support it is fairly convoluted at this point, and I'm not sure how much benefit will really be derived from it). I'll leave this open for now to track, but don't have an ETA to fix.

[SteveAlexander]

I'd like to display some floorplans in an app for a conference. The floorplans are in SVG format — here is an example: https://d7vxxpq42vr68.cloudfront.net/2018/m2020-us/floorplans/375698-752672.svg

The shapes render fine, even for the more complex maps. But, as described here, the text doesn't work.

Any thoughts on whether this is something that will be looked at over the next month or two?

[SteveAlexander]

just tried @krispyen's PR branch — works great for my purposes:

https://github.com/krispypen/flutter_svg.git

[dnfield]

I've merged in that patch, but it doesn't quite fix this issue locally - will leave open for now.

[dnfield]

Ok, cleaned up a bit in https://github.com/dnfield/flutter_svg/pull/95 - which is now published as v0.9.0+1

It's still definitely not perfect, but much improved.

[Drkstr]

Hey everyone, Where can I find some example code for setting text values in SVGs?

[deandreamatias]

This still a issue?

[Huber1]

yes. I have the same Problem when Parsing a svg from my local transport. The Svg is this one:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" viewBox="0 0 1000 500" xml:space="preserve"><script xmlns=""/> 
<rect fill="#C79514" width="1000" height="500"/> 
<text text-anchor="middle" x="50%" y="50%" dy=".35em" font-family="Arial, sans-serif" font-weight="bold" font-size="425px" fill="#ffffff">21</text> 
<style xmlns="" class="darkreader darkreader--fallback">html, body, body :not(iframe) {
    background-color: #232425 !important;
    border-color: #777067 !important;
    color: #dddcd9 !important;
}</style></svg>

Location: https://www.mvv-muenchen.de/fileadmin/lines/02021.svg

The Text is not, as expected centered vertically and horizontally, but only centered horizontally

Is it a coincidence that the bottom line of the text is centered?

EDIT: The Image is not cropped. I put it in a Center on a blank screen to make sure it is completely visible