我注意到对SVG组应用CSS转换会导致其子文本元素在Safari中 Flink 。其他元素的转换在Safari中看起来很平滑。所有子元素的转换在Firefox或Chrome中看起来都很平滑。
看下面的视频例子。代码附在这篇文章的最后,也在https://codepen.io/xiaohk/pen/yLqOZXx。
野生动物园
火狐
chrome 合金
尝试的变通方法
我发现了几个相关的问题:
- CSS Transform (rotation) causes text flicker in Safari 8 (yosemite)
- CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide
- Prevent flicker on webkit-transition of webkit-transform
然而,所有的解决方案并不适用于我的问题。例如,我试图设置-webkit-transform-style:preserve-3d;
、-webkit-transform: translateZ(0);
和-webkit-filter: opacity(1);
。
如有任何建议,欢迎提出,谢谢!
const svg = d3.select('.svg-element');
const group = svg.append('g')
.attr('class', 'container-group');
group.append('circle')
.attr('cx', 120)
.attr('cy', 100)
.attr('r', 20)
.style('fill', 'pink')
const ys = [80, 100, 120, 140, 160];
const text = group.selectAll('text.my-text')
.data(ys)
.join('text')
.attr('class', 'my-text')
.attr('x', (_, i) => 250 + i * 10)
.attr('y', d => d)
.text('A quick and lazy fox.')
svg.call(
d3.zoom()
.extent([[0, 0], [500, 300]])
.scaleExtent([1, 8])
.on("zoom", zoomed)
);
function zoomed({transform}) {
group.attr("transform", transform.toString());
}
.container {
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
-webkit-transform-style:preserve-3d;
-webkit-filter: opacity(1);
}
.svg-element {
width: 500px;
height: 300px;
border: 1px solid black;
}
g.container-group {
-webkit-backface-visibility: hidden;
}
text.my-text {
-webkit-transform-style:preserve-3d;
-webkit-transform: translateZ(0);
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
}
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<div class="container">
<svg class="svg-element" width=300 height=300>
</div>
1条答案
按热度按时间1hdlvixo1#
添加
text-rendering: geometricPrecision;
,它将阻止Safari调整字体字距,以在每个比例下最佳地显示文本。