javascript - Safari 不尊重 CSS 变换原点，`transform-b​​ox: fill-box` 无济于事

Question

我transform: scale(0.8, 1)用来挤压这个钟面上两位数字的宽度。如果不使用transform-origin，数字就会滑出正确的位置。

transform-origin我使用的在 Chrome 和 Firefox 上运行良好，但在 Safari 上没有区别。这是它的外观：

以下是 Safari 显示的内容：

到目前为止，我发现的有关此问题的所有内容都表明可以transform-box: fill-box通过 Safari 解决此问题，但对我而言，这没有任何区别。一些较旧的解决方案与使用-webkit-前缀有关，但这无济于事，而且无论如何应该只是更旧版本的 Safari 的问题。

样式应用在 JavaScript 中，因为这些元素是动态创建的：

        text2.setAttribute('x', x2.toString());
        text2.setAttribute('y', y2.toString());
        text2.setAttribute('dy', '3.5');
        text2.classList.add('clock-face');
        text2.textContent = h.toString();

        if (h > 9) {
          text2.style.transformBox = 'fill-box';
          text2.style.transform = 'scale(0.8, 1)';
          text2.style.transformOrigin = [10, 19, 28][h - 10] + '%';
        }

我也试图通过样式表来强制执行这个问题，但无济于事：

.clock-face {
  font-family: $clock-face-font;
  font-size: 10px;
  letter-spacing: -0.05em;
  text-anchor: middle;
  fill: white;
  transform-box: fill-box !important;
  user-select: none;
}

这些样式的其余部分肯定会被应用，因此通常不会忽略 CSS。Web Inspector 确认transform-box已应用：

任何有关如何解决此问题的建议将不胜感激。

标签： javascripthtmlcsssvgsafari

Answer 1

这并不理想，我仍然想知道发生了什么transform-origin，但只是通过使用dx属性而不是transform-origin与 Safari 和其他浏览器一起使用以不同方式解决问题。

        if (h > 9) {
          text2.style.transform = 'scale(0.8, 1)';
          text2.setAttribute('dx', ['4', '8', '12.5'][h - 10]);
        }