Question

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的任何建议都运行良好？

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

SVG方向属性

1 个答案: