Safari: jQuery toggle() issue with svg

Question

我有一个带有svg路径的文档，我正在使用带有transform: scaleX(-1)的css类水平翻转它们。这在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类，用于定义它们的颜色填充。我创建了一些按钮，使用jQuery的toggle((在这些类和其他具有不同颜色和transform: scaleX(-1)的类之间切换。这在两种浏览器上都适用于div，但在Safari上，即使不再应用带有转换的类，svg也会保持翻转状态。

有人知道为什么会发生这种事吗？非常感谢。

Answer 1

问题

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

解决方案

将#rectOut和#svgPath path设置为transform: scaleX(1)，这样Safari就可以默认回退到