search

BigBadaboom / androidsvg

SVG rendering library for Android
http://bigbadaboom.github.io/androidsvg/
Apache License 2.0
1.21k stars 231 forks source link

Text is misplaced #280

Closed yaofangwx123 closed 9 months ago

yaofangwx123 commented 10 months ago

When I load an SVG with text, the text is misplaced。

My Svg is : <svg id="test_1" data-name="test 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.39 113.39"><defs><style>.cls-1{font-size:22.01px;fill:#dbd8d8;font-family:Calibri;}.cls-2{letter-spacing:-0.01em;}.cls-3{fill:none;stroke:#dbd8d8;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}</style></defs><text class="cls-1" transform="translate(29.55 108.82)">Whi<tspan class="cls-2" x="36.2" y="0">t</tspan><tspan x="43.34" y="0">e</tspan></text><line class="cls-3" x1="56.7" y1="85.93" x2="56.69" y2="3.7"/><line class="cls-3" x1="75.14" y1="73.06" x2="75.14" y2="16.56"/><line class="cls-3" x1="38.25" y1="73.06" x2="38.25" y2="16.56"/><line class="cls-3" x1="19.81" y1="58.26" x2="19.81" y2="31.36"/><line class="cls-3" x1="93.58" y1="58.26" x2="93.58" y2="31.36"/></svg>

Screenshot_20240129_183238

BigBadaboom commented 9 months ago

Hi @yaofangwx123

Sorry for the slow reply. Your ticket got lost in my inbox. :-/

I believe that the main problem here is the font that is being used. This SVG uses the font "Calibri". Are you using an SVGExternalFileResolver or SimpleAssetResolver to make that font available to AndroidSVG? If you do that, I think you will find that the SVG renders well.

Alternatively, you can load the SVG into an SVG editor and use your editors "text to paths" feature to convert the text to vector objects. If you do that, you won't need to worry about the font.

yaofangwx123 commented 9 months ago

Hi @yaofangwx123

Sorry for the slow reply. Your ticket got lost in my inbox. :-/

I believe that the main problem here is the font that is being used. This SVG uses the font "Calibri". Are you using an SVGExternalFileResolver or SimpleAssetResolver to make that font available to AndroidSVG? If you do that, I think you will find that the SVG renders well.

Alternatively, you can load the SVG into an SVG editor and use your editors "text to paths" feature to convert the text to vector objects. If you do that, you won't need to worry about the font.

Thank you for your reply. I have resolved this issue and my modifications are as follows. Overall, I think this library is very good, but maybe some special formats of SVG support are not very good.

<svg id="test_1" data-name="test 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.39 113.39"><defs><style>.cls-1{font-size:16.01px;fill:#dbd8d8;font-family:Calibri;text-anchor: middle}.cls-2{letter-spacing:-0.01em;}.cls-3{fill:none;stroke:#dbd8d8;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}</style></defs><text fill = "#dbd8d8" x = "56.695" y = "110" font-size="28" font-family="Times New Roman" style="text-anchor:middle">White</text><line class="cls-3" x1="56.7" y1="85.93" x2="56.69" y2="3.7"/><line class="cls-3" x1="75.14" y1="73.06" x2="75.14" y2="16.56"/><line class="cls-3" x1="38.25" y1="73.06" x2="38.25" y2="16.56"/><line class="cls-3" x1="19.81" y1="58.26" x2="19.81" y2="31.36"/><line class="cls-3" x1="93.58" y1="58.26" x2="93.58" y2="31.36"/></svg>