0

目前，我正在使用 i18next 在 React 中开发一个多语言项目。

我有一些包含静态文本语言的 SVG 图像。这是来自 SVG 图像之一的示例。

<text
  stroke="none"
  style="outline-style:none;"
  id="text4"
  stroke-width="1px"
  x="301.069519px"
  text-rendering="geometricPrecision"
  font-family="SinhalaSangamMN"
  fill="#000000"
  font-size="32px"
  y="263.101746px"
  transform=""
  text-anchor="middle"
>
  cieplna < ~~~~~~~~~~ text I want to change
</text>;

是否可以使用我在 React 组件中使用的 i18Next 实用程序将本地化传递到 SVG 文件中：

i18next.js


const checkLocale = (lng) => {
  return getLocale(lng);
}

export function init18n() {
  const i18nOpts = {
    lng: window.userLang,
    fallbackLng: 'it',
    debug: true,
  }
  return checkLocale(window.userLang).then(res => {
      if (res) {
        i18nOpts.backend = {
          loadPath: `${env.REACT_APP_API_URL}locales/{{lng}}/{{ns}}.json`,
          crossDomain: true,
        }
      }
      return init(i18nOpts);
  })
  .catch(err =>{
    return init(i18nOpts);
  })
}

反应示例：label={i18next.t( 'windows.MAIN_CARD.projectName' )}

如果没有，这是我可以从本地存储中做的事情吗？

本地存储 window.localStorage.i18nextLng

在这个 Stack Overflow 问题Angular / svg - pass data into svg & 在这篇博文https://getlocalization.wordpress.com/2016/11/07/how-to-utilize-svg-in-localization/中，它被证明了这是可能的。

不知道从哪里开始，在此先感谢您的帮助。

4

1 回答 1

0

是的，你可以做到。在您的组件中，首先在开头添加以下内容：

const { t, i18n } = useTranslation();

然后，而不是写cieplna，写：

t('path.to.your.cielplna.translation')

翻译必须存储在 json 文件中。

查看 react i18 next 文档，或者您可以在此处找到的不同示例。 https://github.com/i18next/react-i18next/tree/master/example/react/src
翻译存储在public/locales文件夹中。

于 2021-01-22T16:22:53.593 回答