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
	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定位......怎么样？那么应该如何应用为组中任何实例中的元素定义的CSS规则？

编辑：显然，这不是所有浏览器的问题。所以我的问题现在变得更像“跨浏览器的方式是什么？”

Answer 1

我已经完成了一些谷歌搜索并发现了这篇非常有见地的文章：http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

然后我自己去了，并提出以下建议：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我尝试使用你的代码，但我遇到了坐标或其他问题，因为箭头的一半被切断了，可能是由路径的坐标引起的。只需要几个矩形就可以了，因为你的问题是如何在同一时间获得多个实例动画。

希望这有帮助。

CSS应用于SVG组元素但未使用时

1 个答案: