Text-Anchor isn't being respected in the SVG

[abhishek1508]

I am downloading the following SVG over a network request

<svg xmlns="http://www.w3.org/2000/svg" id="rectangle-white-2" width="60" height="42" viewBox="0 0 20 14">
  <g>
    <path d="M0,0 H20 V14 H0 Z" fill="none"/>
    <path d="M3,1 H17 C17,1 19,1 19,3 V11 C19,11 19,13 17,13 H3 C3,13 1,13 1,11 V3 C1,3 1,1 3,1" fill="none" stroke="hsl(230, 18%, 13%)" stroke-linejoin="round" stroke-miterlimit="4px" stroke-width="2px"/>
    <path d="M3,1 H17 C17,1 19,1 19,3 V11 C19,11 19,13 17,13 H3 C3,13 1,13 1,11 V3 C1,3 1,1 3,1" fill="hsl(0, 0%, 100%)"/>
  </g>
  <text x="10px" y="10px" font-weight="bold" font-family="Arial">
    <tspan text-anchor="middle" fill="black" font-size="9">123</tspan>
  </text>
</svg>

Once I get the SVG above, I render it to a Bitmap and then use it with a normal ImageView.

Actual output

As seen in the android app

Expected output

As seen in a SVG viewer

[abhishek1508]

@BigBadaboom Thank you for taking a look at it and attaching a Bug label to it. I was wondering if there is a workaround you could suggest meanwhile a fix is available. I am on a time crunch and it is important to get this working for our users.

[BigBadaboom]

@abhishek1508 Which version of AndroidSVG are you using? Is it the most recent release from Maven?

I suspect it is because the text-anchor is on the <tspan>. If you are able to modify the SVG(s), then remove that and it should work. If you can't modify the SVGs, then I am afraid there is no workaround.

[abhishek1508]

@BigBadaboom I am using v1.4. Just removing the text-anchor from tspan did not help, but adding it to the <text> itself is very much acceptable, even though the text is not still 100% centered and a little bit to the left.

So my new modified SVG looks like this

<svg xmlns="http://www.w3.org/2000/svg" id="rectangle-white-2" width="60" height="42" viewBox="0 0 20 14">
    <g>
        <path d="M0,0 H20 V14 H0 Z" fill="none"/>
        <path d="M3,1 H17 C17,1 19,1 19,3 V11 C19,11 19,13 17,13 H3 C3,13 1,13 1,11 V3 C1,3 1,1 3,1" fill="none" stroke="hsl(230, 18%, 13%)" stroke-linejoin="round" stroke-miterlimit="4px" stroke-width="2"/>
        <path d="M3,1 H17 C17,1 19,1 19,3 V11 C19,11 19,13 17,13 H3 C3,13 1,13 1,11 V3 C1,3 1,1 3,1" fill="hsl(0, 0%, 100%)"/>
    </g>
    <text x="10" y="10" font-weight="bold" text-anchor="middle">
        <tspan fill="black" font-size="9">88</tspan>
    </text>
</svg>

[BigBadaboom]

Sorry if I wasn't clear. Removing the <tspan>, and moving all the attributes to the <text>, is what I was suggesting. Also, spaces in <text> elements are not necessarily ignored. In this particular case they should be, but just in case, try this arrangement:

<text x="10" y="10" font-weight="bold" text-anchor="middle" fill="black" font-size="9">88</text>

Let me know if the centring improves. Like I said, it shouldn't. But if it does I'd like to know. :)

[abhishek1508]

Trying the above, as you mentioned the output remains the same and the text is not completely centered. :)

[adbenitez]

this issue is also affecting us in Delta Chat where we use this lib for contact QR display