Question

我有一个svg正在使用一些像素值（cx，cy，r）。当我在Safari中打开它时，我做cmd +“+”或cmd +“ - ”一切都搞砸了。我不知道如何解决这个问题。 Chrome无法解决此问题。

执行这两个操作之一时，这些样式的计算值会发生变化。我不希望他们改变。

body {
  background-color: black;
}

.container {
  width: 28%;
  height: 28%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.circle {
  transform-origin: center center;
}
.circle-1 {
  transform: rotateZ(0deg) translateZ(0);
  stroke-dasharray: 220;
  stroke-dashoffset: 20;
}
.circle-2 {
  transform: rotateZ(540deg) translateZ(0);
  stroke-dasharray: 176;
  stroke-dashoffset: 20;
}
.circle-3 {
  transform: rotateZ(72deg) translateZ(0);
  stroke-dasharray: 132;
  stroke-dashoffset: 30;
}

<!-- To reproduce, open in Safari e.g. Safari 10.1 and click command + "+". The positioning for the circles changes. This doesn't happen in Chrome -->

<svg class="container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73">
  <circle class="circle circle-1" cx="36.5" cy="36.5" r="35" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
  <circle class="circle circle-2" cx="36.5" cy="36.5" r="28" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
  <circle class="circle circle-3" cx="36.5" cy="36.5" r="21" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
</svg>

这是一个codepen： https://codepen.io/Ostos/pen/WZbGRW

缩放时svg与safari的问题

0 个答案: