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>

我试着用你的代码，但是我的坐标有问题，或者因为有一半的箭头被切断，可能是由路径的坐标造成的。如果您的问题是如何同时获得多个实例动画，那么只需要几个矩形即可。

希望这会有所帮助。