如何解决根据要使用的语言显示svg文本
如何使要显示的文本根据所使用的语言而有所不同。
例如文本在以下位置的示例:
Spanish I would like to use the text: Hola!
Italian I would like to use the text: Ciao!
English I would like to use the text: Hi!
如果未传递任何语言,则为默认语言,例如英语。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="30" width="200">
<text x="0" y="15" fill="blue">Hi!</text>
</svg>
语言选择示例,该语言可以在cookie或会话中。
或者可以将其作为参数传递到文件name.svg?Lang=es
解决方法
您可以使用开关元素。将浏览器的语言设置更改为首选意大利语或西班牙语,以查看文本更改。
<svg width="100%" height="100%" viewBox="0 100 600 300">
<switch font-size="18">
<g systemLanguage="en">
<text x="20" y="220" xml:lang="en-US">Why can't they just speak English ?</text>
<text x="230" y="150" xml:lang="en">English (US)</text>
</g>
<g systemLanguage="es">
<text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden simplemente hablar en castellano ?</text>
<text x="230" y="150" xml:lang="en">Spanish (ES)</text>
</g>
<g systemLanguage="it">
<text x="20" y="220" xml:lang="it" font-size="18">Perchè non possono semplicemente parlare italiano ?</text>
<text x="230" y="150" xml:lang="en">Italian</text>
</g>
</switch>
</svg>
,
在现代浏览器中,您可以使用自定义元素动态生成SVG
使用罗伯茨systemLanguage
增强SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/systemLanguage
对于React,您必须在每个自定义元素周围添加额外的包装器代码,
React仅支持此W3C标准for 71%,
使用W3C标准自定义元素API的所有其他框架都是100%BFF
customElements.define('svg-text',class extends HTMLElement {
static get observedAttributes() {
return ["bgfill","width","height","stroke","fill","text","x","y","fontsize","rotate"
]; // update whenever these attributes change
}
connectedCallback() {
let [bgfill = "pink",width = 200,height = 150,stroke = "none",fill = "green",text = "Hello",x = "50%",y = "50%",fontsize = "1em",rotate = "0"
] = this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
this.innerHTML = `<svg width='${width}' height='${height}'` +
`xmlns='http://www.w3.org/2000/svg'>` +
`<rect width='100%' height='100%' fill='${bgfill}'/>` +
`<text dominant-baseline='middle' text-anchor='middle' font-size='${fontsize}'` +
` x='${x}' y='${y}' fill='${fill}' ` +
` stroke='${stroke}' transform='rotate(${rotate} ${width/2} ${height/2})'>${text}</text></svg>`
}
attributeChangedCallback(name,oldValue,newValue) {
if (this.isConnected) this.connectedCallback();
}
});
// example changing attribute
setTimeout(() => {
document.querySelector("svg-text").setAttribute("text","Ola!");
},21e2)
<svg-text bgfill='lightblue' fill="blue" width="100" fontsize="3em" height="100">
</svg-text>
<svg-text fill="green" width="75" height="25" text="Hallo">
</svg-text>
<svg-text bgfill="gold" fill="red" width="50" text="Bonjour" rotate="90" fontsize="2em">
</svg-text>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。