Question

我试图通过替换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>

实际输出actual。

<!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>

我希望将 浏览器 替换为 متصفحذكي。 类似的 opera 和 ايفون 。

实际输出图像actual。预期输出expect。

有人可以帮助我实现这一目标吗？

Answer 1

出现问题是因为序列“：”没有定义方向。 Unicode具有一组双向控制字符，有助于解释这种情况。如果您在كروم和后面的插入点之间插入left-to-right mark，则可以清楚地看到后面的所有内容都是从左到右。

虽然在HTML中标记可以写为&lrm;，但这在纯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>&#8206;<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>&#8206;<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>

如何使用span元素在svg中呈现阿拉伯文字？

1 个答案: