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

希望這可以幫助其他人。