Edge nie obsługuje skalowania i kotwicy tekstowej: środek prawidłowo w svg

Question

Piszę program wyświetlający wykresy za pomocą D3 i znalazłem problem, w którym Microsoft Edge nie obsługuje poprawnie skalowania krawędzi. Moje kodu jest poniżej:

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

w Google Chrome, IE i Firefox, powiększanie działa dokładnie tak, jak oczekiwano. Jednak po uruchomieniu tego kodu w Microsoft Edge, etykiety tekstowe na górze węzłów przesunie się w prawo, jak powiększam, całkowicie znikają, gdy opuszczają prostokąt. Problem znika, gdy nie ustawiam text-anchor, ale to będzie oznaczało, że muszę rozliczać ręczne pozycjonowanie tekstu, szczególnie biorąc pod uwagę, kiedy strona jest używana na arenie międzynarodowej. (Same znaki tekstowe nie mają znaczenia, ponieważ pochodzą z niestandardowej czcionki w produkcie końcowym).

Jak mogę obejść ten problem, zapewniając wyśrodkowanie etykiety tekstowej, a mimo to jej prawidłowe wyświetlanie w Edge?

Answer 1

W podobnych sytuacjach często występowały niezgodności przeglądarki w układaniu tekstu. Jeśli nie znajdziesz magicznej kombinacji właściwości CSS, która działa dla wszystkich, tutaj jest jeszcze jedna opcja:

Dodaj element <pre> do swojej strony. Ten element jest niewidoczny z definicji. Wybierz element za pomocą kodu D3 select. Dodaj tekst do układu jako innerHTML. Użyj stylu classed i style, aby styl elementu był dokładnie taki sam, jak styl tekstu. Teraz możesz uzyskać dokładną długość tekstu za pomocą funkcji przeglądarki getComputedTextLength lub poprzez odczytanie wymiarów elementu.

Ukryj to wszystko w poręcznej funkcji ponownego użycia lub klasie TextLengthCalculator.

Po uzyskaniu wymiarów, możesz sam obliczyć żądane przesunięcia i po prostu przesunąć tekst, dostosowując jego atrybuty x i y.

Jest to szybkie i uwzględnia lokalizację i styl. Jest nawet czysty i niezawodny, ponieważ sam przeglądarka dokonuje obliczeń. I chociaż przeglądarki wciąż dają tutaj różne wyniki, przynajmniej każda przeglądarka jest zgodna z własnymi obliczeniami.