SVG g元素CSS转换不工作跨浏览器？

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。

我希望能找出：

1. 问题识别（实际的问题是什么）。
2. 应该使用什么（如果有的话）解决方法或使用替代技术（不仅仅是“使用库X”）。但是，如果“库X”解决了这个问题，那么实际的解决方法/替换技术将在“库X”代码中找到，所以仍值得一提。

Answer 1

我找到了满足我的答案。对于我的要求，我正在寻找在use多个地方引用svg，地址（通过querySelector），并分别在每个svg副本中动画元素。

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

因为家长对影子选择的封闭阴影根和跨浏览器的状态，我选择把不尝试动画通过CSS use引用SVG元素。

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

的其它方法我想，工作跨浏览器是：

1. 联SVG（NO- use参考）。 https://jsbin.com/xovidop/edit?html,output

2. 重构的SVG成不同的，可重复使用的部分（即不需要制作动画本身）和use那些从包含部件可以很容易地解决和风格的一个内联SVG。 https://jsbin.com/qivebiy/edit?html,output

希望这可以帮助其他人。