我有一个 svg 格式的简单 1x1 像素圆圈，与其他浏览器相比，它在 Safari 上的呈现方式不同。 Safari 上的预览非常小，但它必须像 Chrome 或 Brave 一样呈现全屏/整个容器。 Safari 有什么问题，因为它破坏了交叉兼容性？
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Our symbol in its own coordinate system -->
<rect id="background" width="100%" height="100%" fill="black">
<animate attributeName="fill" values="black; red; yellow; green; blue" dur="20s" repeatCount="indefinite" />
</rect>
<symbol id="myDot" width="1" height="1">
<circle cx="0.5" cy="0.5" r="0.5" />
</symbol>
<!-- All instances of our symbol row 1-->
<use href="#myDot" x="0" y="0" fill="#748E9F" />
<use href="#myDot" x="1" y="0" fill="#748E9F" />
<use href="#myDot" x="2" y="0" fill="#748E9F" />
<use href="#myDot" x="3" y="0" fill="#748E9F" />
</svg>
</body>
</html>
另外，动画不行
我尝试在 svg 标签中包含：
width="24" height="24"
width="100%" height="auto"
width="100%" height="100%"
它不起作用，最后两个解决方案不允许我在某些地方上传图像，所以我只是省略了整个尺寸。
这是 codepen.io 上的代码：codepen.io/BunnyNomics101/details/MWqLXOL