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 returns 在 Edge 中是正确的，尽管显然不是这样。

关于如何检测 direction 在 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 中 returns true，在 IE11 和 Edge 中false。

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

SVG方向属性的特征检测

Feature detection of SVG direction attribute

javascript

svg

right-to-left

microsoft-edge