如何修复svg CSS动画？
我有一个SVG按钮可以在明暗模式之间切换，这个按钮使用CSS设置动画，SVG代码直接在HTML代码中。在我的本地主机上，一切都很好，但当我将代码提交到GitHub页面时，它根本不起作用。我的项目是在11月完成的 这是HTML如何修复svg CSS动画？,css,user-interface,svg,css-animations,user-experience,Css,User Interface,Svg,Css Animations,User Experience,我有一个SVG按钮可以在明暗模式之间切换，这个按钮使用CSS设置动画，SVG代码直接在HTML代码中。在我的本地主机上，一切都很好，但当我将代码提交到GitHub页面时，它根本不起作用。我的项目是在11月完成的 这是HTML <a (click)="changeTheme()" class="btn-theme"> <svg id="theme-selector" xmlns="
<a (click)="changeTheme()" class="btn-theme">
<svg
id="theme-selector"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300"
height="150"
viewBox="0 0 300 150"
>
<defs>
<linearGradient
id="linear-gradient"
x1="1"
y1="0.7"
x2="0.11"
y2="0.127"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#201baf" />
<stop offset="1" stop-color="#6d38a0" />
</linearGradient>
<linearGradient
id="linear-gradient-2"
x1="1"
y1="0.7"
x2="0.11"
y2="0.127"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#3ecaff" />
<stop offset="1" stop-color="#05f" />
</linearGradient>
<radialGradient
id="theme-radial-gradient"
cx="0.5"
cy="0.5"
r="0.674"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#fff700" />
<stop offset="1" stop-color="#f70" />
</radialGradient>
<linearGradient
id="linear-gradient-3"
x1="0.5"
x2="0.5"
y2="1"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#daf7f9" />
<stop offset="1" stop-color="#95c0c4" />
</linearGradient>
</defs>
<g
id="bg-night"
stroke="#dad9ec"
stroke-width="10"
fill="url(#linear-gradient)"
>
<rect width="300" height="150" rx="75" stroke="none" />
<rect x="5" y="5" width="290" height="140" rx="70" fill="none" />
</g>
<g
id="bg-day"
class="bg-day"
stroke="#dad9ec"
stroke-width="10"
fill="url(#linear-gradient-2)"
>
<rect width="300" height="150" rx="75" stroke="none" />
<rect x="5" y="5" width="290" height="140" rx="70" fill="none" />
</g>
<g
id="luna"
class="moon"
transform="translate(-4.896 1)"
opacity="0"
>
<circle
id="Ellipse_2"
data-name="Ellipse 2"
cx="47"
cy="47"
r="47"
transform="translate(30.896 28)"
fill="#97abbf"
/>
<path
id="Path_1"
data-name="Path 1"
d="M47,0C72.957,0,71.333,21.043,71.333,47S72.957,94,47,94A47,47,0,0,1,47,0Z"
transform="translate(30 28)"
fill="#dcefff"
/>
</g>
<g
id="estrellaz"
class="moon"
transform="translate(-4.896 3)"
opacity="0"
>
<circle
id="Ellipse_3"
data-name="Ellipse 3"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(142.896 39)"
fill="#fcadad"
/>
<circle
id="Ellipse_4"
data-name="Ellipse 4"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(178.896 28)"
fill="#fff"
/>
<circle
id="Ellipse_5"
data-name="Ellipse 5"
cx="4"
cy="4"
r="4"
transform="translate(166.896 75)"
fill="#fff"
/>
<circle
id="Ellipse_6"
data-name="Ellipse 6"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(194.896 108)"
fill="#fcadad"
/>
<circle
id="Ellipse_7"
data-name="Ellipse 7"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(158.896 113)"
fill="#fff"
/>
<circle
id="Ellipse_8"
data-name="Ellipse 8"
cx="4"
cy="4"
r="4"
transform="translate(227.896 70)"
fill="#fcadad"
/>
<circle
id="Ellipse_9"
data-name="Ellipse 9"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(244.896 52)"
fill="#fff"
/>
<circle
id="Ellipse_10"
data-name="Ellipse 10"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(256.896 99)"
fill="#f7ff82"
/>
<circle
id="Ellipse_11"
data-name="Ellipse 11"
cx="2.5"
cy="2.5"
r="2.5"
transform="translate(267.896 48)"
fill="#fcadad"
/>
<circle
id="Ellipse_12"
data-name="Ellipse 12"
cx="4"
cy="4"
r="4"
transform="translate(227.896 31)"
fill="#f7ff82"
/>
</g>
<path
id="sol"
class="sun"
d="M66.762,2.185a2,2,0,0,1,3.277.878l4.354,14.254a2,2,0,0,0,2.363,1.364l14.521-3.356a2,2,0,0,1,2.4,2.4L90.319,32.244a2,2,0,0,0,1.364,2.363l14.254,4.354a2,2,0,0,1,.878,3.277l-10.167,10.9a2,2,0,0,0,0,2.729l10.167,10.9a2,2,0,0,1-.878,3.277L91.683,74.392a2,2,0,0,0-1.364,2.363l3.356,14.521a2,2,0,0,1-2.4,2.4L76.756,90.319a2,2,0,0,0-2.363,1.364l-4.354,14.254a2,2,0,0,1-3.277.878l-10.9-10.167a2,2,0,0,0-2.729,0l-10.9,10.167a2,2,0,0,1-3.277-.878L34.608,91.683a2,2,0,0,0-2.363-1.364L17.724,93.676a2,2,0,0,1-2.4-2.4l3.356-14.521a2,2,0,0,0-1.364-2.363L3.063,70.039a2,2,0,0,1-.878-3.277l10.167-10.9a2,2,0,0,0,0-2.729L2.185,42.238a2,2,0,0,1,.878-3.277l14.254-4.354a2,2,0,0,0,1.364-2.363L15.324,17.724a2,2,0,0,1,2.4-2.4l14.521,3.356a2,2,0,0,0,2.363-1.364L38.961,3.063a2,2,0,0,1,3.277-.878l10.9,10.167a2,2,0,0,0,2.729,0Z"
transform="translate(171 21)"
fill="url(#theme-radial-gradient)"
/>
<path
id="nube"
class="nube"
d="M124.067,92.762h55.688s7.515-5.544,5.914-13.8-3.45-15.647-12.32-19.22-23.162,4.928-23.162,4.928S145.135,49.64,136.88,47.423s-12.69.986-19.713,8.378-8.378,21.191-8.378,21.191-2.218-5.544-6.9-3.45A25.6,25.6,0,0,0,90.063,85.37c-2.094,4.8,3.45,7.392,3.45,7.392Z"
transform="translate(34.076 16.238)"
fill="url(#linear-gradient-3)"
/>
</svg>
</a>
root:{
--op-from: 0%;
--op-to: 100%;
--moon-op-from: 100%;
--moon-op-to: 0%;
--nube-from: 250px, 16.238px;
--nube-to: 34.076px, 16.238px;
--sun-from: -30px, 21px;
--sun-to: 171px, 21px;
}
.dark-theme{
--op-from: 100%;
--op-to: 0%;
--moon-op-from: 0%;
--moon-op-to: 100%;
--nube-from: 34.076px, 16.238px;
--nube-to: 250px, 16.238px;
--sun-from: 171px, 21px;
--sun-to: 30px, 21px;
}
.nube{
-webkit-animation: nube .3s ease-out both;
-moz-animation: nube .3s ease-out both;
-o-animation: nube .3s ease-out both;
-ms-animation: nube .3s ease-out both;
animation: nube .3s ease-out both;
}
@keyframes nube {
from{
-webkit-transform: translate(var(--nube-from));
-moz-transform: translate(var(--nube-from));
-o-transform: translate(var(--nube-from));
-ms-transform: translate(var(--nube-from));
transform: translate(var(--nube-from));
opacity: var(--op-from);
}
to{
-webkit-transform: translate(var(--nube-to));
-moz-transform: translate(var(--nube-to));
-o-transform: translate(var(--nube-to));
-ms-transform: translate(var(--nube-to));
transform: translate(var(--nube-to));
opacity: var(--op-to);
}
}
.sun{
-webkit-animation: sun .3s ease-out both;
-moz-animation: sun .3s ease-out both;
-o-animation: sun .3s ease-out both;
-ms-animation: sun .3s ease-out both;
animation: sun .3s ease-out both;
}
@keyframes sun {
from{
-webkit-transform: translate(var(--sun-from));
-moz-transform: translate(var(--sun-from));
-o-transform: translate(var(--sun-from));
-ms-transform: translate(var(--sun-from));
transform: translate(var(--sun-from));
opacity: var(--op-from);
}
to{
-webkit-transform: translate(var(--sun-to));
-moz-transform: translate(var(--sun-to));
-o-transform: translate(var(--sun-to));
-ms-transform: translate(var(--sun-to));
transform: translate(var(--sun-to));
opacity: var(--op-to);
}
}
.moon{
-webkit-animation: moon .3s ease-out both;
-moz-animation: moon .3s ease-out both;
-o-animation: moon .3s ease-out both;
-ms-animation: moon .3s ease-out both;
animation: moon .3s ease-out both;
}
@keyframes moon {
from{
opacity: var(--moon-op-from);
}
to{
opacity: var(--moon-op-to);
}
}
.bg-day{
-webkit-animation: bg-day .3s ease-out both;
-moz-animation: bg-day .3s ease-out both;
-o-animation: bg-day .3s ease-out both;
-ms-animation: bg-day .3s ease-out both;
animation: bg-day .3s ease-out both;
}
@keyframes bg-day {
from{
opacity: var(--op-from);
}
to{
opacity: var(--op-to);
}
}
我不知道为什么它不起作用，任何帮助都将不胜感激 如果你能把你的代码变成一个有效的代码片段，这将对我们有所帮助。看见
root:{
--op-from: 0%;
--op-to: 100%;
--moon-op-from: 100%;
--moon-op-to: 0%;
--nube-from: 250px, 16.238px;
--nube-to: 34.076px, 16.238px;
--sun-from: -30px, 21px;
--sun-to: 171px, 21px;
}
.dark-theme{
--op-from: 100%;
--op-to: 0%;
--moon-op-from: 0%;
--moon-op-to: 100%;
--nube-from: 34.076px, 16.238px;
--nube-to: 250px, 16.238px;
--sun-from: 171px, 21px;
--sun-to: 30px, 21px;
}
.nube{
-webkit-animation: nube .3s ease-out both;
-moz-animation: nube .3s ease-out both;
-o-animation: nube .3s ease-out both;
-ms-animation: nube .3s ease-out both;
animation: nube .3s ease-out both;
}
@keyframes nube {
from{
-webkit-transform: translate(var(--nube-from));
-moz-transform: translate(var(--nube-from));
-o-transform: translate(var(--nube-from));
-ms-transform: translate(var(--nube-from));
transform: translate(var(--nube-from));
opacity: var(--op-from);
}
to{
-webkit-transform: translate(var(--nube-to));
-moz-transform: translate(var(--nube-to));
-o-transform: translate(var(--nube-to));
-ms-transform: translate(var(--nube-to));
transform: translate(var(--nube-to));
opacity: var(--op-to);
}
}
.sun{
-webkit-animation: sun .3s ease-out both;
-moz-animation: sun .3s ease-out both;
-o-animation: sun .3s ease-out both;
-ms-animation: sun .3s ease-out both;
animation: sun .3s ease-out both;
}
@keyframes sun {
from{
-webkit-transform: translate(var(--sun-from));
-moz-transform: translate(var(--sun-from));
-o-transform: translate(var(--sun-from));
-ms-transform: translate(var(--sun-from));
transform: translate(var(--sun-from));
opacity: var(--op-from);
}
to{
-webkit-transform: translate(var(--sun-to));
-moz-transform: translate(var(--sun-to));
-o-transform: translate(var(--sun-to));
-ms-transform: translate(var(--sun-to));
transform: translate(var(--sun-to));
opacity: var(--op-to);
}
}
.moon{
-webkit-animation: moon .3s ease-out both;
-moz-animation: moon .3s ease-out both;
-o-animation: moon .3s ease-out both;
-ms-animation: moon .3s ease-out both;
animation: moon .3s ease-out both;
}
@keyframes moon {
from{
opacity: var(--moon-op-from);
}
to{
opacity: var(--moon-op-to);
}
}
.bg-day{
-webkit-animation: bg-day .3s ease-out both;
-moz-animation: bg-day .3s ease-out both;
-o-animation: bg-day .3s ease-out both;
-ms-animation: bg-day .3s ease-out both;
animation: bg-day .3s ease-out both;
}
@keyframes bg-day {
from{
opacity: var(--op-from);
}
to{
opacity: var(--op-to);
}
}