【发布时间】：2021-05-30 06:51:24
【问题描述】：
谁能解释当用户缩放浏览器时我需要做些什么来阻止 SVG/CSS 动画的中心发生变化？
我制作了一个非常小的 html 网页here，其中包含一个 SVN 图像，其中包含一个围绕其中心旋转的轮子的 CSS 动画，而旋转中心是两条线相交的位置。
在我的浏览器（Safari 14、OSX）的默认缩放级别下，svg 和动画看起来不错——我的意思是旋转大约在正确的位置。在我也试过的几部手机上看起来不错。
但是，如果我在浏览器上更改缩放级别（在 safari 中使用 CMD-"+" 或 CMD-"-" 完成），那么旋转会突然呈现在完全不同的位置。如果我恢复到正常缩放级别（CMD-“0”），那么一切都会恢复正常。即使是很小的缩放变化（例如 125% 或 80%），也会发生这种情况（在我的浏览器上）。这是我面临的video showing the problem。
在linked example 中，我尝试删除大部分无关的杂乱，尽管这不是一个绝对最小的例子，但它非常接近。 （它是从一个更大的页面中删减的......）
This issue seems related 但我无法让那里的任何建议对我有用。
This other issue 似乎也相关，但我无法让任何建议发挥作用。
this thread 可能会有所帮助...
我已将关键部分粘贴在下面，以便您无需下载文件即可在此处看到它们：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
svg .pumpVisuals {
animation: mootate 1s linear infinite; /* Standard */
-webkit-animation: mootate 1s linear infinite; /* Chrome, Safari, Opera : see https://www.tutorialrepublic.com/faq/how-to-play-and-stop-css-animation-using-jquery.php */
transform-box: fill-box;
transform-origin: center;
animation-play-state: running;
}
/* standard */
@keyframes mootate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mootate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<svg width="650" height="409" xmlns="http://www.w3.org/2000/svg">
<line fill="none" stroke-width="10" stroke-opacity="null" fill-opacity="null" x1="231.35893" y1="210" x2="416.05181" y2="210" id="svg_20" stroke-linejoin="null" stroke-linecap="null" stroke="#000"/>
<line fill="none" stroke-width="10" stroke-opacity="null" fill-opacity="null" x1="315.84148" y1="134.72017" x2="316.37349" y2="284.40486" id="svg_19" stroke-linejoin="null" stroke-linecap="null" stroke="#000"/>
<ellipse fill="#000" stroke-width="0" cx="315.48367" cy="209.99871" class="pumpVisuals pumptoggle" id="svg_17" rx="25.50134" ry="25.00147"/>
<line fill="none" stroke-width="5" x1="298.49991" y1="194.00004" x2="332.49993" y2="226.00005" class="pumpVisuals pumptoggle" id="svg_31" stroke-linejoin="null" stroke-linecap="null" stroke="#ffff00"/>
<rect stroke="#205bdb" fill="#ffff00" stroke-width="5" x="248" y="11.00003" width="138.00003" height="127.00003" id="boiler_rect"/>
<rect fill="none" stroke="#000" stroke-width="10" stroke-opacity="null" fill-opacity="null" x="483.00002" y="148.00003" width="0" height="8" id="svg_28"/>
<ellipse fill="none" stroke="#ffff00" stroke-width="0" cx="103.99255" cy="391.85517" id="svg_40" rx="7.24973" ry="3.62487"/>
<text fill="#000000" stroke="#ffff00" stroke-width="0" x="228.98606" y="183.48037" class="pumptoggle" id="svg_43" font-size="24" font-family="sans-serif" text-anchor="start" xml:space="preserve">Pump</text>
<text fill="#000000" stroke="#ffff00" stroke-width="0" x="285.32255" y="81.72969" id="svg_33" font-size="24" font-family="sans-serif" text-anchor="start" xml:space="preserve">Boiler</text>
</svg>
</html>
【问题讨论】：
标签： html css animation safari transform