При масштабировании в Safari текст не масштабируется должным образом - PullRequest
1 голос
/ 30 марта 2020

У меня есть svg, содержащий текст, который вы можете увеличивать или уменьшать. При использовании Chrome или Firefox текст масштабируется должным образом до такой степени, что он полностью исчезает при достаточном уменьшении масштаба. В Safari при уменьшении он корректно масштабируется до одной точки, затем остается того же размера, он просто начинает немного двигаться (протестировано на Desktop с v.13.0.1).

Кажется, что есть что-то, препятствующее уменьшению шрифта до определенного размера, и установка -webkit-text-size-adjust: none;, похоже, не имеет значения. Это не общая проблема масштабирования в Safari, а только текст, поскольку я вижу, что другие элементы масштабируются правильно. В скрипте ниже также есть красная рамка, которая, если вы достаточно уменьшите масштаб, исчезнет.

Как получить такое же поведение в Safari, как в Chrome и Firefox?

Минимальный пример для воспроизведения: http://jsfiddle.net/5vzsLht3/2/

Проблема в моем личном проекте: https://i.imgur.com/dmv6WmW.png

javascript часть ( как в скрипке)

var nodeFontSize = 16;

var svg = d3.select("body").append("svg:svg").attr("height","100%").attr("width","100%")
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append("g");

var text = svg.append("svg:text")
    .attr("x", 200)
    .attr("y", 200)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("font-size", nodeFontSize + "px")
    .text("Zoom this text by scrolling");

var bbox = text.node().getBBox();

var rect = svg.append("svg:rect")
    .attr("x", bbox.x)
    .attr("y", bbox.y)
    .attr("width", bbox.width)
    .attr("height", bbox.height)
    .style("fill", "#ccc")
    .style("fill-opacity", ".3")
    .style("stroke", "red")
    .style("stroke-width", "2px");

//Redraw for zoom
function redraw() {
  window.console && console.log("here", d3.event.translate, d3.event.scale);
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...