Safari：jQuery svg 的 toggle() 问题

Question

我有一个带有 svg 路径的文档，我正在使用 css classes 和 transform: scaleX(-1) 水平翻转它们。这在 Chrome 中运行良好，但在 Safari 上运行不佳。

$('#bt1').click(function() {
  $('#rectOut').toggleClass('red blue');
})

$('#bt2').click(function() {
  $('#svgPath path').toggleClass('silver hotpink');
})

#rectOut {
  width: 150px;
  height: 100px;
  padding: 5px;
}
#rectIn {
  width: 25%;
  height: 25%;
  background-color: yellow;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
  transform: scaleX(-1);
}
button {
  margin: 20px 0 40px;
}
svg {
  width: 200px;
  height: 70px;
}
path {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.silver {
  fill: silver;
}
.hotpink {
  fill: hotpink;
  transform: scaleX(-1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rectOut" class="rect red">
  <div id="rectIn"><p>123</p></div>
</div>
<button id="bt1">toggle rectangle</button>

<div>
  <svg id="svgPath">
    <path x="0" y="0" class="silver" d="M 0 0 C 50 0, 70 50, 150 50 C 0 100, 0 50, 0 0 Z"></path>
  </svg>
</div>
<button id="bt2">toggle shape</button>

我有一个 div 和一个 svg 用于比较。 div 和 svg 都有一个 css class 来定义它们的颜色填充。我创建的按钮使用 jQuery 的 toggle() 在那些 classes 和其他具有不同颜色的 classes 和 transform: scaleX(-1) 之间切换。这适用于两种浏览器上的 div，但在 Safari 上，即使不再应用带有转换的 class，svg 仍保持翻转状态。

有人知道为什么会这样吗？谢谢。

Answer 1

问题

未设置默认值，因此 transform: scaleX(-1) 保留。

解决方案

将 #rectOut 和 #svgPath path 设置为 transform: scaleX(1) 以便 Safari 有一个默认回退到

Safari：jQuery svg 的 toggle() 问题

Safari: jQuery toggle() issue with svg

safari

jquery

svg

transform

toggle

问题

解决方案