SVGLoader doesn't support Text tags

Questions
, ,
1

Hi,

I was trying to load SVG (mentioned below) which consists of text using SVGLoader. However, I found that SVGLoader still doesn’t support text extraction https://discourse.threejs.org/t/solved-does-svg-loader-support-text/4096/4. Any alternative solution or workaround (code) to render text (which was in SVG)?

image
image1368×100 2.3 KB

<svg width="688" height="30" viewBox="0 0 688 30" style="max-width:100%;height:auto;"><g transform="translate(0,7)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M20,6V0H668V6"></path><g class="tick" opacity="1" transform="translate(20,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text></g><g class="tick" opacity="1" transform="translate(84.8,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10</text></g><g class="tick" opacity="1" transform="translate(149.6,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">20</text></g><g class="tick" opacity="1" transform="translate(214.4,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">30</text></g><g class="tick" opacity="1" transform="translate(279.2,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text></g><g class="tick" opacity="1" transform="translate(344,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">50</text></g><g class="tick" opacity="1" transform="translate(408.8,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">60</text></g><g class="tick" opacity="1" transform="translate(473.59999999999997,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">70</text></g><g class="tick" opacity="1" transform="translate(538.4,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">80</text></g><g class="tick" opacity="1" transform="translate(603.2,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">90</text></g><g class="tick" opacity="1" transform="translate(668,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">100</text></g></g></svg>
2

You can parse the SVG code manually and use CSS2DRenderer to render the labels (although scaling may be a bit annoying - but still relatively a better solution than using WebGL to render said text, applying styling in WebGL ain’t a fun ride.)

Alternatively, you can convert text elements in the SVG to paths / shapes - keeping in mind they become static afterwards.

Alternatively, you could try to implement that SVG-text-to-path conversion in three.js and open a PR to three.js repo :pray:

1 Like
3

Thank you very much for your quick reply.

I’ll try the recommended solutions.

4

The three-svg-js might be helpful too.

I really have to get the demo of this repo hosted, so you can just paste in your SVG and see if it works.

1 Like
5

Thank you for your help.

I have tried the provided library and it seems to be working fine. However, there is a text alignment issue as in the images. I’ll try to fix it.

image
image1446×342 3.13 KB

image
image638×654 8.38 KB

6

Would adding a dependence on Troika three text be okay for your project? It will be easier to add support for text alignment.

1 Like
7

See text-anchor - SVG: Scalable Vector Graphics | MDN (mozilla.org)

I updated the repo readme with link to live demo. You can paste in the code from the mozilla link above to see that text anchoring is working

Hopefully, that works for you.

1 Like
8

Just updated to support alignment-baseline - SVG: Scalable Vector Graphics | MDN (mozilla.org)

You can paste in the code from the Mozilla link above to see that text vertical alignment is working for these specific cases

image

1 Like
9

Thank you for your Great Help. It works well.

Are you the owner of three-svg-js project? I found some bugs related to styling as well and I fixed them for my project.

10

Yes. If you can contribute either by a PR or bug report with lines that were fixed, that would be great.

1 Like
11

Sure. I’ll create.