Question

我正在寻找专门针对svg g element css过渡的浏览器支持的答案。

要显示问题，here是一个在Chrome中有效的代表性示例，但只在Firefox和Safari中的两个转换位置之间“跳转”。

直播示例：https://jsbin.com/lepepev/edit?html,output
.rect-group正在转变，以便rect一起移动：

<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”）。但是，如果“库X”解决了问题，那么实际的解决方法/ alt技术将在“库X”代码中找到，因此仍然值得一提。

Answer 1

我找到了满足我的答案。根据我的要求，我希望在use，地址（通过querySelector）和每个svg副本中的元素中分别引用多个地方的svg。

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

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

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

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

内联svg（无 - use引用）。 https://jsbin.com/xovidop/edit?html,output
将svg重构为不同的，可重用的部分（不需要动画本身）和use来自包含部分的内联svg的部分可以轻松地进行寻址和样式化。 https://jsbin.com/qivebiy/edit?html,output

希望这有助于其他人。

SVG g元素CSS转换不适用于跨浏览器？

1 个答案: