gpt4 book ai didi

CSS 应用于 SVG 组元素但不在使用时

转载 作者:太空宇宙 更新时间:2023-11-04 11:16:26 28 4
gpt4 key购买 nike

基本上,我有一个小的 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 规则?

编辑:显然,这不是所有浏览器的问题。所以我的问题现在更像是“跨浏览器的方式是什么?”

最佳答案

我做了一些谷歌搜索,发现了这篇很有见地的文章: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>

我试过你的代码,但我遇到了坐标或其他问题,因为一半的箭头不断被切断,这可能是由路径坐标引起的。尝试使用几个矩形,因为您的问题是如何让多个实例同时设置动画。

希望这对您有所帮助。

关于CSS 应用于 SVG 组元素但不在使用时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33169218/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com