我试图通过替换span元素中的英语单词来显示阿拉伯语文本。但是它用它的话互换了。
我已经尝试通过将方向xml：lang，unicode-bidi添加到svg属性。更改为RTL，但未更改顺序
请参考这个小提琴：
预期输出，英文单词modelOutput。
<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">Browsers</tspan><tspan
x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
实际输出实际。
<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
我希望浏览器将被متصفحذكي取代。与ايفون类似的歌剧。
谁能帮助我实现这一目标？
出现问题是因为序列“：”没有定义方向。Unicode具有一组双向控制字符，可帮助解释这种情况。如果在كروم和后面的插入点之间插入从左到右的标记，则可以清楚地看到后面的所有内容都是从左到右的。
在HTML中，标记可以写成‎，这在纯XML的SVG名称空间中不起作用。在那里，您必须使用数字实体‎。<tspan>我介绍的额外内容并不是严格必需的，但是它使代码的读取更加容易-否则，屏幕上的明显顺序会有些混乱。
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan>‎<tspan> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>没有bug，生活会更轻松吗？从理论上讲，这应该是解决方案，而实际上在Chrome中是这样。在Firefox中，rtl的宽度<tspan>计算错误，随后的ltr部分消失在右侧。我能找到的最佳解决方法是稍微更改布局，以便百分比数字在第二行的末尾显示为右对齐：
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan>‎<tspan text-anchor="end" x="107"> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句