水平翻转图像，调整大小问题

Question

所以我有一个图像，在图像的中心有一个圆圈，它是一个按钮。如果单击该圆圈，则通过向图像添加css类来水平翻转图像。到目前为止，此方法仍然有效，但是还有其他控件，例如用于调整图像大小的圆圈。如果翻转图像并调整其大小，它将移出之前的矩形。因此，css属性存在问题。

controls.append("circle")//mirror button
           .attr("r", radius)
           .attr("cx", "50%")
           .attr("cy", "50%")
           .on("click", function() {
                let svg = this.parentNode.parentNode.children[0];
                svg.classList.toggle("flip-image");
           });

.flip-image {
                transform: scale(-1, 1);
                transform-origin: center center;
           }