html - 响应式 svg : add inline style to `` -element

Question

出于某种原因，我的 svg 动画在 Chrome 中运行良好，但在 Safari 中运行不正常。
在 safari 中检查了一些元素后，我发现我必须添加 style="max-width:100%"到 <svg> -元素。

所以我有这个:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 825 825">
我想这样做:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 825 825" style="max-width: 100%">

如果我在 Safari 的元素检查器中执行此操作，效果很好，但如果我将其添加到 svg -element Safari 完全忽略它。 (即使在我清空缓存之后)

我尝试更改 viewbox来自 0 0 825 825至 0 0 100% 100%但这只会导致什么都不显示。

我还尝试向 svg`-element 添加一个类，但也被忽略了。

有什么想法吗？

Answer 1

所以我阅读了有关 Crossbrowser 兼容性的内容并猜测是什么......

它解决了我的问题。我复制了每个 transform 和 animation 并添加了 -webkit- 和 -moz-。

现在一切正常。