CSS應用於SVG組元素，但未使用時

Question

基本上，我有一個小小的SVG，它使用一個組來定義一個可重複使用的符號。這個組包含一個我想在CSS中動畫的路徑。我面臨的問題是，只有「原始」元素纔會應用CSS，而「已使用」元素則不會。

.player_arrow_marker { 
 
    animation-name: player_marker_arrow; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes player_marker_arrow { 
 
    from { 
 
    transform: translate(0px, 0px) scale(1); 
 
    } 
 
    50% { 
 
    transform: translate(0px, 10px) scale(1.1); 
 
    } 
 
    to { 
 
    transform: translate(0px, 0px) scale(1); 
 
    } 
 
}

<svg viewBox="-50 -50 100 100" style="height:120px;"> 
 
    <g id="starmap_player_marker_arrow" style="transform: rotate(0deg);"> 
 
    <path class="player_arrow_marker" fill="#00AEEF" d="M0,0l-10.971,13.702h5.545L0,20.479l5.425-6.776l5.545,0L0,0z M3.889,12.722L0,17.579l-3.89-4.857h-3.975 
 
\t l5.761-7.195L0,8.154l2.104-2.627l5.761,7.195H3.889z"></path> 
 
    </g> 
 
    <use xlink:href="#starmap_player_marker_arrow" style="transform: rotate(90deg);"></use> 
 
    <use xlink:href="#starmap_player_marker_arrow" style="transform: rotate(180deg);"></use> 
 
    <use xlink:href="#starmap_player_marker_arrow" style="transform: rotate(270deg);"></use> 
 

 
</svg>

正如你可以看到，從4個箭，只能由定義的一個過得去的CSS針對性的...怎麼會這樣？那麼應該如何應用將在組的任何實例中爲元素定義的CSS規則？

編輯：顯然，這不是所有瀏覽器上的問題。所以現在我的問題變得更像「什麼是跨瀏覽器的方式來做到這一點？」

Answer 1

我已經做了一些谷歌搜索和跨這篇文章這是非常有見地的傳來：http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

然後我了個去自己，想出了以下內容：

.player_arrow_marker { 
 
    animation-name: player_marker_arrow; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes player_marker_arrow { 
 
    from { 
 
    transform: translate(0px, 0px) scale(1); 
 
    } 
 
    50% { 
 
    transform: translate(0px, 10px) scale(1); 
 
    } 
 
    to { 
 
    transform: translate(0px, 0px) scale(1); 
 
    } 
 
} 
 

 
.arrow { 
 
    width:45px; 
 
    height:30px; 
 
}

<svg width="0" height="0"> 
 
    <symbol id="arrow" width="20" height="20"> 
 
    <rect x="0" y="0" width="20" height="20" style="stroke: #000000; fill:none;"/> 
 
    </symbol> 
 
</svg> 
 

 
<svg class="arrow" viewBox="0 0 45 30"> 
 
    <use class="player_arrow_marker" xlink:href="#arrow" x="0" y="0" /> 
 
    <use class="player_arrow_marker" xlink:href="#arrow" x="25" y="0" /> 
 
</svg>

我試着用你的代碼，但是我的座標有問題，或者因爲有一半的箭頭被切斷，可能是由路徑的座標造成的。如果您的問題是如何同時獲得多個實例動畫，那麼只需要幾個矩形即可。

希望這會有所幫助。