时间戳

首页 > 解决方案 > 如何使用 span 元素在 svg 中呈现阿拉伯文本？

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

问题描述

我正在尝试通过替换 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>

我希望浏览器将被متصفح ذكي 取代。与ايفون类似的歌剧。

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

谁能帮我实现这个？

标签： htmlsvg

解决方案

问题出现是因为序列“ : ”没有明确的方向。Unicode 有一组双向控制字符，有助于解释这种情况。如果在 كروم 和后面的分词之间插入一个从左到右的标记，则可以清楚地看出后面的所有内容都是从左到右的。

虽然在 HTML 中标记可以写为&lrm;，但这在纯 XML 的 SVG 命名空间内不起作用。在那里，您必须改用数字实体&#8206;。我引入的额外<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>

如果没有虫子，生活会不会更轻松？从理论上讲，这应该是解决方案，实际上在 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>

推荐阅读