javascript - SVG方向属性的特征检测

Question

MS Edge 有 this bug 。我似乎忽略了 SVG 中的 direction 属性，因此将其设置为“rtl”会得到与“ltr”相同的结果(请参阅错误中的示例)。其他主要浏览器似乎都能正确支持它。

如何在 Javascript 中进行特征检测？我试过:

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

但是 supported 在 Edge 中返回 true，尽管情况显然并非如此。

关于如何检测 SVG 中的方向是否运行良好，有什么建议吗？

Answer 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 附加到页面。希望这对您来说不是问题。