SVG方向属性的特征检测答案

【问题标题】：Feature detection of SVG direction attributeSVG方向属性的特征检测
【发布时间】：2017-06-23 21:49:47
【问题描述】：

MS Edge 有this bug。我似乎忽略了 SVG 中的 direction 属性，因此将其设置为“rtl”会得到与“ltr”相同的结果（参见 bug 中的示例）。其他主流浏览器似乎都很好地支持它。

如何在 Javascript 中对此进行特征检测？我试过了：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var supported = svg.style.direction !== undefined;

但是supported 在 Edge 中返回 true，尽管显然不是这样。

关于如何检测 SVG 中的 direction 是否运行良好？

【问题讨论】：

您需要找到svg 的某些属性，当direction 设置为rtl 时会发生变化，这与设置为ltr 时不同。我对 SVG 或文字说明不够流利，无法告诉您那是什么，但您可能会尝试在完全支持 direction 的浏览器中找到一个更改并检查...也许与 @987654322 有关@
@MikeMcCaughan 在那里找到了一些东西 - 我想知道你是否可以使用 svg 中隐藏的 <text> 元素来计算一些东西。
有趣的建议，我试试看。

标签： javascript svg microsoft-edge right-to-left

【解决方案1】：

您可以创建一个包含一些从右到左文本的文本对象。然后获取该文本的尺寸，看看它是否在适当的方向上延伸。

类似：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("direction", "rtl");
text.textContent="X";
svg.appendChild(text);
document.body.appendChild(svg);
var supported = text.getBBox().x < 0;
console.log("supported="+supported);

这在 Chrome 和 Firefox 中返回 true，在 IE11 和 Edge 中返回 false。

但是，它确实需要您将 SVG 附加到页面。希望这对您来说不是问题。

【讨论】：

谢谢！在使用svg.parentNode.removeChild(svg); 设置supported 并使用_ 而不是X 作为文本后，我对其进行了轻微修改，删除了svg 节点，因为它的侵入性较小。在接受这个之前，我会等待一段时间看看是否有其他答案。
它不需要可见。您总是可以将其绝对定位在屏幕外的某个点上。或者让它的不透明度为零。