SVG 中的波斯语文本正在崩溃
我有一个带有波斯语文本的 SVG。例如：Sracm odenaño 意思是 Hello World
但是当我在浏览器中打开我的 SVG 时，它会崩溃！
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68" height="24" role="img" aria-label="سلام دنیا">
<link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/>
<link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/>
<style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/>
<style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/>
<title>سلام دنیا</title>
<a target="_blank" xlink:href="#">
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="r">
<rect width="68" height="24" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#r)">
<rect width="0" height="24" fill="#555"/>
<rect x="0" width="68" height="24" fill="rgb(245, 119, 31)"/>
<rect width="68" height="24" fill="url(#s)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
<text aria-hidden="true" x="340" y="170" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="580">سلام دنیا</text>
<text x="340" y="160" transform="scale(.1)" fill="rgb(0, 0, 0)" textLength="580">سلام دنیا</text>
</g>
</a>
</svg>预期：
我在浏览器中看到的内容：（抱歉质量不好）
我尝试过：
xml:lang="fa" Direction="rtl" in
I have an SVG with persian text in it. for example: سلام دنیا which means Hello World
But when I open my SVG in browser, it will falling appart!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68" height="24" role="img" aria-label="سلام دنیا">
<link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/>
<link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/>
<style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/>
<style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/>
<title>سلام دنیا</title>
<a target="_blank" xlink:href="#">
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="r">
<rect width="68" height="24" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#r)">
<rect width="0" height="24" fill="#555"/>
<rect x="0" width="68" height="24" fill="rgb(245, 119, 31)"/>
<rect width="68" height="24" fill="url(#s)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
<text aria-hidden="true" x="340" y="170" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="580">سلام دنیا</text>
<text x="340" y="160" transform="scale(.1)" fill="rgb(0, 0, 0)" textLength="580">سلام دنیا</text>
</g>
</a>
</svg>Expected:
What I see in my browser:(Sorry for bad quality)
I tried:
xml:lang="fa" direction="rtl" in <svg> and <text> tag : not worked
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正如 @myf 所指出的：textLength="580" 会将文本分开，这可能会阻止某些浏览器中正确的文本渲染（方向、应用连字等）。
您的代码还包含空的
和unicode-bidi：双向覆盖
您还可以通过
Css-tricks: unicode-bidi
这是一个在 chromium、Firefox 和 ios safari 中渲染良好的精简示例。
调试示例：多种双向覆盖模式
As @myf has pointed out: textLength="580" will tear your text apart that might prevent correct text rendering (direction, applying ligatures etc.) in some browsers.
Your code also contains empty
<link>and<style>elements that might also cause issues.unicode-bidi: bidi-override
You might also force a rtl direction via
Css-tricks: unicode-bidi
Here's is a stripped down example that's rendered fine in chromium, Firefox and ios safari.
Debugging example: multiple bidi-override modes
使用这个片段。您应该将
display: block与方向一起使用。Use this snippet. You should use
display: blockwith direction.