我正在学习SVG。这是我的动画SVG：
#sky {
animation: skyColor 10s alternate infinite linear;
}
@keyframes skyColor {
0% {
fill: #000000;
}
30% {
fill: #000000;
}
40% {
fill: #303030;
}
50% {
fill: #fffade;
}
60% {
fill: #add1db;
}
100% {
fill: #dcf5fc;
}
}
#sun {
r: 10;
fill: yellow;
}
#bear {
transform: translate(50px, 50px);
}<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="600" height="400">
<defs>
<linearGradient id="snowHillGradient1" x1="0.25" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fdfdfd"/>
<stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="snowHillGradient2" x1="0" x2="0.25" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d2d2d2"/>
</linearGradient>
<linearGradient id="snowHillGradient3" x1="0.5" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d6d6d6"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="200" id="sky"/>
<circle id="sun" cx="150" cy="220">
<animateMotion dur="20s" repeatCount="indefinite" path="m 0 0 a 1 1 0 0 1 0 -220 a 1 1 0 0 1 0 220" />
</circle>
<path id="moon" fill="#f7f7f7" d="M 0 0 a 9 9 0 1 0 3 15 c -13 2 -13 -14 -3 -15" >
<animateMotion dur="20s" repeatCount="indefinite" path="m 150 0 a 1 1 0 0 1 0 220 a 1 1 0 0 1 0 -220" />
</path>
<path fill="url(#snowHillGradient1)" stroke="#f0f0f0" stroke-width="0.25" d="M -20 68 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(3);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -60 85 l 212 0 c -81 -42 -191 -39 -212 0" style="transform: scale(2.2);" />
<path fill="url(#snowHillGradient3)" stroke="#eaeaea" stroke-width="0.25" d="M 4 85 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(2.5);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -44 85 l 212 0 c -81 -32 -183 -21 -212 0" style="transform: scale(2.5);" />
<svg width="100" height="100" id="bear">
<!-- Bear -->
<path stroke="black" stroke-width="1" fill="#543C23" d="m 35 60 l -20 20 l -4 10 l 0 5 l 78 0 l 0 -5 l -4 -10 l -20 -20 " />
<ellipse cx="50" cy="50" rx="30" ry="25" fill="#543C23" stroke="black" />
<ellipse cx="41" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="58" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="41" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="58" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="49" cy="58" rx="6" ry="4" fill="black" stroke="none" />
<line x1="49" y1="58" x2="49" y2="68" stroke="black" stroke-width="2" />
<polyline points="34,62 41,67 49,68 57,67 64,62" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 25 40 c -5 -10 0 -15 10 -10" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 75 40 c 5 -10 0 -15 -10 -10" />
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill="none" />
</svg>
<rect x="0" y="0" width="300" height="200" stroke="black" fill="none" />
</svg>我想设置嵌套SVG(#bear-id(的动画/样式。但即使是简单的
#bear {
transform: translate(50px, 50px);
}
仅适用于FireFox！但在Chrome中，它没有任何作用。
如何在Chrome中设置嵌套SVG的样式/动画？也许还有其他方法可以使嵌套的SVG动画化？嵌套SVG由于其自身的坐标系而非常方便。
嵌套<svg>的替代方案可以是<symbol>。符号元素也可以与其他元素分开处理。为了显示符号，您还需要使用<use>，然后可以对其进行样式设置(我将CSS选择器更改为#usebear(。
#sky {
animation: skyColor 10s alternate infinite linear;
}
@keyframes skyColor {
0% {
fill: #000000;
}
30% {
fill: #000000;
}
40% {
fill: #303030;
}
50% {
fill: #fffade;
}
60% {
fill: #add1db;
}
100% {
fill: #dcf5fc;
}
}
#sun {
r: 10;
fill: yellow;
}
#usebear {
transform: translate(50px, 50px);
}<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="600" height="400">
<defs>
<linearGradient id="snowHillGradient1" x1="0.25" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fdfdfd"/>
<stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="snowHillGradient2" x1="0" x2="0.25" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d2d2d2"/>
</linearGradient>
<linearGradient id="snowHillGradient3" x1="0.5" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d6d6d6"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="200" id="sky"/>
<circle id="sun" cx="150" cy="220">
<animateMotion dur="20s" repeatCount="indefinite" path="m 0 0 a 1 1 0 0 1 0 -220 a 1 1 0 0 1 0 220" />
</circle>
<path id="moon" fill="#f7f7f7" d="M 0 0 a 9 9 0 1 0 3 15 c -13 2 -13 -14 -3 -15" >
<animateMotion dur="20s" repeatCount="indefinite" path="m 150 0 a 1 1 0 0 1 0 220 a 1 1 0 0 1 0 -220" />
</path>
<path fill="url(#snowHillGradient1)" stroke="#f0f0f0" stroke-width="0.25" d="M -20 68 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(3);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -60 85 l 212 0 c -81 -42 -191 -39 -212 0" style="transform: scale(2.2);" />
<path fill="url(#snowHillGradient3)" stroke="#eaeaea" stroke-width="0.25" d="M 4 85 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(2.5);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -44 85 l 212 0 c -81 -32 -183 -21 -212 0" style="transform: scale(2.5);" />
<symbol width="100" height="100" id="bear">
<!-- Bear -->
<path stroke="black" stroke-width="1" fill="#543C23" d="m 35 60 l -20 20 l -4 10 l 0 5 l 78 0 l 0 -5 l -4 -10 l -20 -20 " />
<ellipse cx="50" cy="50" rx="30" ry="25" fill="#543C23" stroke="black" />
<ellipse cx="41" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="58" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="41" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="58" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="49" cy="58" rx="6" ry="4" fill="black" stroke="none" />
<line x1="49" y1="58" x2="49" y2="68" stroke="black" stroke-width="2" />
<polyline points="34,62 41,67 49,68 57,67 64,62" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 25 40 c -5 -10 0 -15 10 -10" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 75 40 c 5 -10 0 -15 -10 -10" />
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill="none" />
</symbol>
<use href="#bear" id="usebear"/>
<rect x="0" y="0" width="300" height="200" stroke="black" fill="none" />
</svg>