text in ImageSVG will not shown

[zhiqingchen]

Description

https://shopify.github.io/react-native-skia/docs/images-svg#font-family

The document says:
When rendering your SVG with Skia, all fonts available in your app are also available to your SVG. However, the way you can set the font-family attribute is as flexible as on the web.

But I can't use the text that uses the system font in svg.

Version

1.2.1

Steps to reproduce

1. Use ImageSVG components
2. Use MakeFromString
3. Add text to svg string
4. This svg string is displayed normally in svgo

Snack, code example, screenshot, or link to a repository

const svg = Skia.SVG.MakeFromString(
  `<svg viewBox='0 0 200 200' width="200" height="200" xmlns='http://www.w3.org/2000/svg'>
    <text font-family="sans-serif" font-size="12" x="10" y="10" fill="#fff">Hello World</text>
  </svg>`
)!;

const HelloWorld = () => {
  return (
    <Canvas style={{ flex: 1, width: 300, height: 300 }}>
      <ImageSVG
        svg={svg}
        x={110}
        y={110}
        width={290}
        height={500}
      />
    </Canvas>
  );
};

[liamjones]

I've just hit this while doing upgrades too. From what I've been able to discern so far:

The last version this worked in was 0.1.234, it's been broken since the subsequent release - 0.1.236. I've not tested all releases due to the amount of time it takes to do native builds to test each time but I've bisected between 0.1.213 (the version it was working on for us under RN 0.72) and 1.2.3 (the version I tried to upgrade to under RN 0.73).

Works in 0.1.213, 0.1.223, 0.1.233, 0.1.234.
Doesn't work in 0.1.236, 0.1.238, 0.1.241, 1.0.1, 1.1.0, 1.2.0, 1.2.3.

From looking at the diff between 0.1.234 and 0.1.236 the first thing that jumps out as possibly released is this commit which changed how fonts were looked up: 92e6bc9. The other big thing I see in this release which may have had an effect is skia moving from m119 to m122: f3042c3

I'm going to try and debug through JsiSkTypefaceFactory.h & <ImageSVG> to work out what's changed but I'm not a C++ programmer so if someone with more knowledge can help it'd be appreciated! 🙏

[wcandillon]

We will have a look at this issue but currently Text support in SVG is likely to not work. I strongly recommend not relying on it. I will investigate the issue and advise/document accordingly.

…

On Wed, May 22, 2024 at 10:03 AM Liam Jones ***@***.***> wrote: I've just hit this while doing upgrades too. From what I've been able to discern so far: The last version this worked in was 0.1.234, it's been broken since the subsequent release - 0.1.236. I've not tested all releases due to the amount of time it takes to do native builds to test each time but I've bisected between 0.1.213 (the version it was working on for us under RN 0.72) and 1.2.3 (the version I tried to upgrade to under RN 0.73). Works in 0.1.213, 0.1.223, 0.1.233, 0.1.234. Doesn't work in 0.1.236, 0.1.238, 0.1.241, 1.0.1, 1.1.0, 1.2.0, 1.2.3. From looking at the diff between 0.1.234 and 0.1.236 the first thing that jumps out as possibly released is this commit which changed how fonts were looked up: 92e6bc9. The other big thing I see in this release which may have had an effect is skia moving from m119 to m122: f3042c3 I'm going to try and debug through JsiSkTypefaceFactory.h & <ImageSVG> to work out what's changed but I'm not a C++ programmer so if someone with more knowledge can help it'd be appreciated! 🙏 — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[liamjones]

I will investigate the issue and advise/document accordingly.

Thank you!

We will have a look at this issue but currently Text support in SVG is
likely to not work.
I strongly recommend not relying on it.

Okay, that's probably more difficult for me. Like zhiqingchen, I'm hitting this issue via react-native-echarts which is passing a SVG string to Skia.SVG.MakeFromString.

[wcandillon]

we offered the svg module has a convenience we didn't anticipate that people would use as a full blown renderer. Here something else would need to be done.

…

On Wed, May 22, 2024 at 11:31 AM Liam Jones ***@***.***> wrote: I will investigate the issue and advise/document accordingly. Thank you! We will have a look at this issue but currently Text support in SVG is likely to not work. I strongly recommend not relying on it. Okay, that's probably more difficult for me. Like zhiqingchen, I'm hitting this issue via react-native-echarts which is passing a SVG string to Skia.SVG.MakeFromString. — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[zhiqingchen]

Thanks @wcandillon , this function is really useful.

[github-actions]

🎉 This issue has been resolved in version 1.3.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀