Edge不会在svg中正确处理缩放和text-anchor:middle

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Edge不会在svg中正确处理缩放和text-anchor:middle相关的知识,希望对你有一定的参考价值。

我正在使用D3编写图形显示程序,我发现Microsoft Edge无法正确处理边缘缩放的问题。我的代码如下:

html

<svg id="container" width="200" height="200">
  <g id="inner-container">

  </g>
</svg>

JS:

var container = d3.select("#container");
var innerContainer = container.select("g");
container.call(d3.behavior.zoom().scaleExtent([.5,4]).on("zoom", function(){
  innerContainer.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}));

var nodes = innerContainer.append("g").selectAll(".graph-node");
var labels = innerContainer.append("g").selectAll(".graph-label");

var data = ["A", "B", "C", "D", "E"];

nodes.data(data).enter().call(function (selection){
  selection = selection.append("g");
  selection.attr("class", ".graph-node");
  selection.attr("transform", function(d, i){
    return ["translate(", (i * 20).toString(), " ", (i * 20).toString(), ")"].join("");
  });
  selection.append("rect")
    .attr("width", 20)
    .attr("height", 20)
    .attr("rx", 2).attr("ry", 2)
    .attr("fill", "red");
  selection.append("text")
    .text(function(d){ return d; })
    .attr("text-anchor", "middle")
    .attr("x", 10).attr("y", 15)
    .style("fill", "white");
});
labels.data(data).enter().call(function (selection){
  selection = selection.append("g");
  selection.attr("class", "graph-label");
  selection.append("text")
    .text(function (d) { return "Node" + d; });
  selection.attr("transform", function (d, i) {
    return ["translate(", (i * 20 + 25).toString(), " ", (i * 20 + 15).toString(), ")"].join("");
  });
});

View in JSFiddle

在谷歌浏览器,IE和Firefox中,缩放的工作方式完全符合预期。但是,当我在Microsoft Edge中运行此代码时,节点顶部的文本标签将在我放大时向右移动,当它们离开矩形时完全消失。当我没有设置text-anchor时问题就消失了,但这意味着我必须手动考虑文本定位,特别是考虑到网站在国际上的使用时间。 (文本字符本身并不重要,因为它们来自最终产品中的自定义字体)。

我如何解决这个问题,提供一个居中的文本标签,但仍然可以在Edge上正确显示?

答案

在类似的情况下,文本布局中的浏览器不兼容多次。如果您未能找到适用于所有人的CSS属性的神奇组合,则还有另一个选项:

在页面中添加<pre>元素。根据定义,此元素不可见。选择带有D3的select的元素。将要布局的文本添加为​​innerHTML。使用classedstyle来设置元素的样式,方法与设置文本样式完全相同。现在,您可以使用浏览器函数getComputedTextLength或通过读取元素的尺寸来获取文本的确切长度。

在方便的重用函数或TextLengthCalculator类中隐藏所有这些。

获得尺寸后,您可以自己计算所需的偏移量,并通过调整其x和y属性来简单地移动文本。

这很快并且考虑了本地化和样式。它甚至是干净和可靠的,因为它仍然是浏览器本身进行计算。虽然这里的浏览器有时会产生不同的结果,但至少每个浏览器都与自己的计算一致。

以上是关于Edge不会在svg中正确处理缩放和text-anchor:middle的主要内容,如果未能解决你的问题,请参考以下文章

如何在 HTML5 中正确和响应地缩放 SVG?

带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度

使用 CSS 变换在悬停时缩放 SVG 矩形

SVG 无法在 IE 中正确缩放 - 有额外的空间

Firefox 没有抗锯齿缩放背景 svg

SVG 在 IE 中无法正确缩放 - 有额外的空间