SVG g 元素 CSS 过渡不能跨浏览器工作？答案

【问题标题】：SVG g Element CSS Transitions Don’t Work Cross-Browser?SVG g 元素 CSS 过渡不能跨浏览器工作？
【发布时间】：2017-11-10 08:53:06
【问题描述】：

我正在寻找专门解决浏览器对svg g element css 转换的支持的答案。

为了说明问题，here 是一个在 Chrome 中工作的代表性示例，但在 Firefox 和 Safari 中仅在两个转换位置之间“跳转”。

实时示例：https://jsbin.com/lepepev/edit?html,output
.rect-group 正在转换，以便两个 rects 一起移动：

<style>
  .container {
    margin: 10em;
    width: 100vw;
    height: 100vh;
  }
  .test-rect {
    border: 1px solid black;
  }
  .rect-group {
    transition: transform .25s ease-out 0s;
    transform: translateY(50px);
  }
  .rect-group.normal {
    transform: translateY(0px);
  }
</style>
<svg style="position:absolute;width:0;height:0;" width="0" height="0" version="1.1">
  <defs>
    <symbol id="test-rect" viewBox="0 0 100 100">
      <title>test rect</title>
      <g class="rect-group">
        <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
        <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
      </g>
    </symbol>
  </defs>
</svg>
<div class="container">
  <svg class="test-rect">
    <use xlink:href="#test-rect"></use>
  </svg>
</div>

<!-- .normal is toggled on .rect-group via JS -->

所以，对于 svg g element 的转换只是一个简单的转换。同样，它可以在 Chrome 中使用，但只能在 Firefox 和 Safari 中的两个转换位置之间“跳转”。

我使用的是 Chrome 58、Firefox 54 b14、Safari 10.1.1。

我希望知道：

问题识别（实际问题是什么）。
存在哪些（如果有）解决方法或应使用替代技术（不仅仅是“使用库 X”）。但是，如果“library X”解决了问题，实际的变通方法/alt-technique 将在“library X”代码中找到，因此仍然值得一提。

【问题讨论】：

标签： google-chrome firefox svg safari css-transitions

【解决方案1】：

我找到了一个令我满意的答案。根据我的要求，我希望在多个位置引用一个 svg，并分别在每个 svg 副本中使用 use、地址（通过 querySelector）和动画元素。

svg use 创建一个封闭的影子根。我不确定在封闭的阴影根中处理和设置深层元素是否容易（或可取）。处理父文档中每个 svg 副本并为其设置样式的方法需要特殊的选择器（::shadow 或 /deep/），这些选择器没有一致的浏览器支持。事实上，Chrome 正在完全删除 /deep/（使其像后代组合器一样运行）。 https://www.chromestatus.com/features/4964279606312960

由于 parent-to-shadow 选择器的封闭阴影根和跨浏览器状态，我选择不尝试通过 css 为 use 引用的 svg 元素设置动画。

但是，通过重新考虑如何构建 svg，仍然可以通过 css 制作跨浏览器动画。

我尝试过的跨浏览器的其他方法是：

内联 svg（无-use 参考）。 https://jsbin.com/xovidop/edit?html,output
将 svg 重构为不同的、可重用的部分（它们本身不需要动画），use 那些来自包含这些部分的内联 svg 的部分可以很容易地处理和设置样式。 https://jsbin.com/qivebiy/edit?html,output

希望这对其他人有所帮助。

【讨论】：