Repository: flutter
Issue: [flutter_svg] Text doesn't render in correct location
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/36_

Original report by @wendux on Jul 19, 2018

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

![svg](https://camo.githubusercontent.com/956078561b010d309faad6f271afede2344f556f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d666c757474657225374364617274253230766d2d6666363962342e7376673f7374796c653d666c61742d737175617265)

The  file content is:
```html
<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:
```html
 <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.






---
Comment by @dnfield on Jul 19, 2018
Text support is not great at this point.  I'll take a look but it's likely due to that.

---
Comment by @dnfield on Jul 23, 2018
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.

---
Comment by @SteveAlexander on Dec 30, 2018
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?

---
Comment by @SteveAlexander on Dec 30, 2018
just tried @krispyen's PR branch — works great for my purposes:

 https://github.com/krispypen/flutter_svg.git


---
Comment by @dnfield on Dec 31, 2018
I've merged in that patch, but it doesn't quite fix this issue locally - will leave open for now.

---
Comment by @dnfield on Dec 31, 2018
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.

---
Comment by @Drkstr on Aug 27, 2019
Hey everyone, 
Where can I find some example code for setting text values in SVGs? 

---
Comment by @deandreamatias on Jun 11, 2022
This still a issue?

---
Comment by @Huber1 on Jun 27, 2023
yes. I have the same Problem when Parsing a svg from my local transport.
The Svg is this one:
```svg
<?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

![Screenshot_20230627-112424](https://github.com/dnfield/flutter_svg/assets/22856090/16db7b35-b845-4fea-880e-ab89ec0ee49c)

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