是否有跨浏览器的解决方法，以失去对RTL的支持是IE11/Edge中的SVG？

我遇到了IE11/Edge中我认为是this bug的问题。是否有跨浏览器的解决方法，以失去对RTL的支持是IE11/Edge中的SVG？

下面是一些SVG到瑞普它：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="84" direction="rtl"> 
    <rect height="100%" width="100%"></rect> 
    <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect> 
    <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect> 

    <g transform="translate(161, 14)"> 
     <text x="0" y="3" width="164">HEADER</text> 
    </g> 

    <g transform="translate(0, 29)"> 
     <circle cx="150" cy="10" r="15" fill="#aaa"/> 
     <g transform="translate(131, 16.8)"> 
      <text> 
       <tspan>Text</tspan> 
      </text> 
     </g> 
     <g transform="translate(159, 36.4)"> 
      <text> 
       <tspan>عربى: </tspan> 
       <tspan font-weight="bold">A</tspan> 
       <tspan>، </tspan> 
       <tspan font-weight="bold">B</tspan> 
      </text> 

      <g transform="translate(0, 14)"> 
       <text> 
        <tspan>عربى: </tspan> 
        <tspan font-weight="bold">C</tspan> 
        <tspan>، </tspan> 
        <tspan font-weight="bold">D</tspan> 
       </text> 
      </g> 
     </g> 
    </g> 
</svg>

见下面的图片看到这个问题（IE11左，右铬，无视不同的缩放级别）。

IE似乎完全忽略在根svg标签的direction属性。作为一个证明，尝试删除该属性并在Chrome中重新加载svg，并且会得到与IE相同的错误结果。

跨浏览器解决方法是否缺失对RTL的支持是IE11/Edge中的SVG？

来源

2017-06-13 elnigno

你在web文档根元素中有什么？。对于混合语言内容，您可以在父短语元素（svg：text）上指定语言和方向属性。语言和方向是继承的......看起来像Edge不能识别svg方向属性。请记住，您的svg嵌入在（x）html文档中。结果可能因浏览器而异。另外，请考虑像Adobe这样的SVG编辑器包含专有属性。我必须重新启动，因此稍后会回复完整的答案和代码。问候。 –

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
    <title>SVG Direction tests</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <div> 
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
      <rect height="100%" width="100%"></rect> 
      <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect> 
      <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect> 

      <g transform="translate(161, 14)"> 
       <text x="0" y="3" width="164" direction="ltr">HEADER</text> 
      </g> 

      <g transform="translate(0, 29)"> 
       <circle cx="150" cy="10" r="15" fill="#aaa" /> 
       <g transform="translate(131, 16.8)"> 
        <text direction="ltr" xml:lang="en"> 
         <tspan>Text</tspan> 
        </text> 
       </g> 
       <g transform="translate(159, 36.4)"> 
        <text> 
         <tspan direction="rtl" xml:lang="ar">عربى: </tspan> 
         <tspan direction="ltr" xml:lang="en" font-weight="bold">A</tspan> 
         <tspan direction="rtl" xml:lang="ar">، </tspan> 
         <tspan direction="ltr" xml:lang="en" font-weight="bold">B</tspan> 
        </text> 

        <g transform="translate(0, 14)"> 
         <text> 
          <tspan direction="rtl" xml:lang="ar">عربى: </tspan> 
          <tspan direction="ltr" xml:lang="en" font-weight="bold">C</tspan> 
          <tspan direction="rtl" xml:lang="ar">، </tspan> 
          <tspan direction="ltr" xml:lang="en" font-weight="bold">D</tspan> 
         </text> 
        </g> 
       </g> 
      </g> 
     </svg> 
    </div> 
</body> 
</html>

来源

2017-06-13 21:55:09

谢谢，但不幸的是这还不够。阿拉伯语文本应该出现在拉丁文字母的右侧，并且位置关闭。期望的外观是Chrome在我的问题中呈现的。我开始认为这个bug没有跨浏览器的解决方案。 “ – elnigno

”阿拉伯文字应该出现在拉丁字母的右侧，并且位置已关闭。“ - 把它移动到你的svg .... svg不是HTML，元素在svg画布上用虚拟笔或画笔“绘制”，位置和布局由相对于父元素变换的x/y属性指定元素。傻... –

在chrome中你的语言和文字方向设置是什么？确保它们符合您的Windows 10设置。在Windows 10（winkey +空格键）中更改输入语言不会更改网页（或svg元素）中指定的dir属性。 Edge没有设置来改变诸如Chrome之类的桌面浏览器的网页的显示方向。 –

我发现，依赖于SVG的foreignObject标签，支撑在边缘和其他主流浏览器一个解决办法，但遗憾的是没有在IE浏览器。尽管如此，它总比没有好。通过Javascript中的某些功能检测，可以根据具体情况在原始解决方案和此解决方案之间切换。

基本上，包装常规HTML div标签包含文本foreignObject（记住指定属性xmlns="http://www.w3.org/1999/xhtml"）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="84" direction="rtl"> 
    <rect height="100%" width="100%"></rect> 
    <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect> 
    <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect> 

    <g transform="translate(1, 1)"> 
     <foreignObject width="166" height="20"> 
      <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;"> 
       HEADER 
      </div> 
     </foreignObject> 
    </g> 

    <g transform="translate(0, 29)"> 
     <circle cx="150" cy="10" r="15" fill="#aaa"/> 
     <g transform="translate(1, 1)"> 
      <foreignObject width="136" height="20"> 
       <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;"> 
        Text 
       </div> 
      </foreignObject> 
     </g> 
     <g transform="translate(1, 20)"> 
      <foreignObject width="166" height="40"> 
       <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;"> 
        عربى: <strong>A</strong> ، <strong>B</strong> 
       </div> 
      </foreignObject> 
     </g> 
     <g transform="translate(1, 35)"> 
      <foreignObject width="166" height="40"> 
       <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;"> 
        عربى: <strong>C</strong> ، <strong>D</strong> 
       </div> 
      </foreignObject> 
     </g> 
    </g> 
</svg>

这里是在边缘呈现。

来源

2017-06-23 16:20:31 elnigno

是否有跨浏览器的解决方法，以失去对RTL的支持是IE11/Edge中的SVG？

回答

相关问题