У меня есть 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 + ")");
}