传递本地化到svg图像?

Question

目前，我正在使用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>;

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

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 -将数据传递到svg &在这篇博文https://getlocalization.wordpress.com/2016/11/07/how-to-utilize-svg-in-localization/中，演示了这是可能的。

不知道该怎么做，提前感谢你的帮助。

Answer 1

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

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文件夹中。