【问题标题】:Why is this SVG with css animation being cropped only on Firefox?为什么这个带有 css 动画的 SVG 只在 Firefox 上被裁剪?
【发布时间】:2021-09-25 19:38:32
【问题描述】:

在这个网页的英雄部分是一个使用 CSS 制作动画的 SVG。只有在 Firefox 上,SVG 才被裁剪。我不知道为什么会这样。我尝试使用 Jquery 使用此代码将 SVG 的大小强制为窗口的高度和宽度,这是在另一个问题上建议的。没用。

jQuery( document ).ready(function() {
  jQuery('.hero-animated').attr("width", window.innerWidth).attr("height",window.innerHeight)
});

https://umweltpaket-berlin-mitte.de/

【问题讨论】:

  • 我们需要minimal reproducible example。我认为没有人会通过整个网站来查找问题。
  • @RobertLongson 这不是整个网站,它只是问题中所述的英雄 SVG 动画。如果我要创建一个可重现的示例,则不能保证该问题会再次发生。这是一个非常具体的问题。
  • 如果外部网站发生变化,这个问题以及任何答案对未来的读者都将变得毫无用处。这就是 Stack Overflow 坚持不链接到可能发生变化的网站的原因。

标签: html jquery css svg


【解决方案1】:

在 SVG 代码本身中,有一些遮罩正在裁剪 svg 元素,我手动删除了这些遮罩,它可以正常工作。与此类似:mask="url(#mask-12)"

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-04-22
    • 2016-05-05
    • 2011-10-10
    • 2014-05-17
    • 2021-08-01
    • 1970-01-01
    • 2021-07-31
    相关资源
    最近更新 更多