主页 / coding / 问题 / 76947652
Accepted
PavelDev
Asked: 2023-08-22 01:50:54 +0800 CST

SVG 片段 ID + css 动画。现代浏览器支持吗？

  • 772

今天我第一次了解了SVG片段标识符。这项创新对我的网站非常有用，因为它将我的图标保存在一个扩展名为 .svg 的单独文件中。但是，某些图标使用动画。我们知道有两种方法可以实现 SVG 中的动画：

  1. SMIL（<animate>、<animateTransform>等）；
  2. CSS（animation、transition以及其他）。

编辑网站时，我将所有图标放入 .svg 文件中，并在同一文件中使用 CSS 规则添加动画。在现代浏览器中，一切正常，但内置 Anroid 9 浏览器中缺少旋转动画。 问：因此，我很好奇，当使用 SVG 片段标识符时，WEB 标准是否真的能保证 CSS 动画？哪里标明的？如何在caniuse.com上找到相关信息？

供参考#1。基于 SMIL 构建的图标动画在内置浏览器 Anroid 9 上对我来说效果很好

供参考#2。为了更好地理解，我将给出一个代码示例，其中图标由矩形和三角形表示，动画是使用 CSS 完成的，尽管可以使用<animateTransform>.

文件：测试.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <style>
  :root g { display: none;  fill: #010101; } :root g:target { display: inline; }
  
@keyframes rotate-kf {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}  
.rotate {
    transform-origin:center;
    animation-name: rotate-kf;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.rotate.reverse {
    animation-direction: reverse;
}     
  </style>
  <svg viewBox="0 0 160 160">
    <g id="icon1" class="rotate">
      <rect x="30" y="30" width="100" height="100"/>
     </g>
  </svg>
  <svg viewBox="0 0 120 120">
    <g id="icon2" class="rotate reverse">
        <polygon points="0,120 120,120 60,0" />
     </g>
  </svg>
  
</svg>

文件：测试.htm

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<style>
img { width: 110px;
    height: 110px;}
</style>
<body>
    <img src="test.svg#icon1"><img src="test.svg#icon2">
</body>
</html>
html

1 个回答

  1. Best Answer

    根据规范，HTML<img>元素中引用的 SVG 片段是否应该能够运行动画？为此，处理模式必须至少是安全动画的。安全静态模式会阻止动画。

    令人惊讶的是，SVG 2 规范似乎是自相矛盾的。

    一致性章节说：

    如果嵌入文档支持声明性动画，则嵌入“图像”元素中的 SVG 必须以安全动画模式进行处理，否则必须以安全静态模式进行处理。

    相同的处理模式预计可用于使用 SVG 代替光栅图像的其他情况，例如 HTML 元素img或任何采用<image>数据类型的 CSS 属性。这与HTML 的要求一致，即图像源必须引用“既不是分页也不是脚本的非交互式、可选动画图像资源”

    链接章节在所使用的语法中存在一个障碍。我对第一个词“否则”的理解是，对比情况是“只有整个文档的 URL 引用才有效”。

    否则，必须解析子资源以识别目标元素。如果获取的文档是用户代理可以解析以创建文档对象模型的类型，则它必须以安全静态模式处理它（也就是说，不获取任何其他外部资源，也不运行脚本或播放动画或视频）。为外部子资源引用生成的文档模型必须是不可变的（只读）且无法修改。

    这应该如何协同工作？我不知道。也许您应该向工作组提出问题。

    • 1

相关问题