内联 SVG css 动画不适用于 Safari
Inline SVG css animation not working on Safari
我使用的是这些的最新版本：
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
这是我用来在除 Safari 之外的几乎所有浏览器上实现所需 CSS 动画效果的 CSS。
.tt-divider {
border-style: outset;
border-color: LawnGreen;
border-radius: 3px;
margin-bottom: 2.5vh;
margin-top: 2.5vh;
background: gold;
border-width: 2px;
animation: grow-divider 2s forwards linear;
margin: auto;
}
@-webkit-keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
@keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#landing-logo {
display: inline-block;
max-width: 350px;
min-width: 150px;
width: 50vw;
margin-top: 5vh;
margin-bottom: 1vh;
}
#navigation{
padding-left: 7.5vh;
padding-right: 7.5vh;
text-align:center;
}
#btm-right-nav{
max-width: 55px;
position: fixed;
right: 25px;
bottom: 10px;
}
.btm-right-ico {
display: block;
color: lawngreen;
margin:auto;
margin-bottom: 5vh;
font-size: 16px;
text-rendering: optimizeLegibility;
}
.fontawesome-i2svg-active .btm-right-ico {
animation-name: grow-buttons;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
@-webkit-keyframes grow-buttons{
from {font-size:16px; }
to {font-size: 45px; }
}
@keyframes grow-buttons{
from {font-size:16px}
to {font-size:45px;}
}
grow-divider 动画完美运行，另一个不相关的动画在不同页面上也完美运行。我唯一不能仅在 Safari 上工作的是 grow-buttons 动画。 是的，总的来说，Safari 我已经回测了过去 5 年中制作的每个版本，它做的事情完全一样..
最初我认为这是一个 CSS 命名问题...不 我已经尝试 CSS 的多种实现以实现兼容性 但无济于事。然后我以为它只是 Safari，它可能是，但为什么我的其他 CSS 动画工作呢？我什至通过 JS 将我的 CSS 放在新生成的元素上，但它不起作用。我什至在 JQuery 中使用 async 编程来确保在 <i> 更改为 <svg> 之前未应用 CSS
值得一提的是，原始 <i> 元素上的 CSS 类 从 font-awesome 注入到新的 <svg> 中...所以 CSS 动画是继承..这个逻辑适用于除Safari之外的所有浏览器......
我完全不知道是什么原因造成的，无论如何这里是整个页面的 html：
<!--Display none is changed to block when the page is done loading-->
<div id="landing" style="display:none">
<div id="navigation">
<img id="landing-logo" src="example.gif" alt="example">
<div class="tt-divider"></div>
<div id="page">
</div>
<div id="btm-right-nav">
<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
<i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
</div>
</div>
</div>
我想我可以让它工作，如果我只是猛拉我自己的 svg 并将它整齐地放在 <img> 中并且没有在我的按钮上做一些掩蔽魔法..我不想这样做是因为这会切断 fontawesome 的大量功能并花费更多时间...所以 与此同时我为 Safari 用户关闭了动画 很伤心因为我想要这个动画非常令人满意，我真的不想自己烘焙蒙版 SVG 并将它们放在 <img> 中，这样我就可以在 SVG 上 运行 CSS 动画...我的意思是..这是我必须做的吗？
我可以将内联 SVG 注入 src 吗？
这是页面加载后来自 fontawesome 的烘焙 SVG 数据（我取出了数据:)
<div id="btm-right-nav">
<svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-
hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-jyjnVEKbKq5c"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0"
y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-224 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)"
mask="url(#mask-
jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg>
<!--<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-
circle"
data-
fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="phone" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-
i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-eJs29EAdXlZv"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0" y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-256 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)"
mask="url(#mask-
eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%">
</rect></svg>
<!--<i class="fas fa-phone btm-right-ico" data-fa-
mask="fas
fa-circle" data-fa-transform="shrink-7"></i> Font Awesome
fontawesome.com-->
</div>
哇......真的希望这对某人有所帮助...
要解决此问题，您可以使用常规的旧 css 在动画中对其进行变换缩放。
字体大小 可用于在除 Safari
之外的所有浏览器上放大内联 SVG
@-webkit-keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
@keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
底线：
使用 transform: scale() 而不是 font-size: ()px在 SVG CSS 动画上最大化兼容性。
我使用的是这些的最新版本：
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
这是我用来在除 Safari 之外的几乎所有浏览器上实现所需 CSS 动画效果的 CSS。
.tt-divider {
border-style: outset;
border-color: LawnGreen;
border-radius: 3px;
margin-bottom: 2.5vh;
margin-top: 2.5vh;
background: gold;
border-width: 2px;
animation: grow-divider 2s forwards linear;
margin: auto;
}
@-webkit-keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
@keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#landing-logo {
display: inline-block;
max-width: 350px;
min-width: 150px;
width: 50vw;
margin-top: 5vh;
margin-bottom: 1vh;
}
#navigation{
padding-left: 7.5vh;
padding-right: 7.5vh;
text-align:center;
}
#btm-right-nav{
max-width: 55px;
position: fixed;
right: 25px;
bottom: 10px;
}
.btm-right-ico {
display: block;
color: lawngreen;
margin:auto;
margin-bottom: 5vh;
font-size: 16px;
text-rendering: optimizeLegibility;
}
.fontawesome-i2svg-active .btm-right-ico {
animation-name: grow-buttons;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
@-webkit-keyframes grow-buttons{
from {font-size:16px; }
to {font-size: 45px; }
}
@keyframes grow-buttons{
from {font-size:16px}
to {font-size:45px;}
}
grow-divider 动画完美运行，另一个不相关的动画在不同页面上也完美运行。我唯一不能仅在 Safari 上工作的是 grow-buttons 动画。 是的，总的来说，Safari 我已经回测了过去 5 年中制作的每个版本，它做的事情完全一样..
最初我认为这是一个 CSS 命名问题...不 我已经尝试 CSS 的多种实现以实现兼容性 但无济于事。然后我以为它只是 Safari，它可能是，但为什么我的其他 CSS 动画工作呢？我什至通过 JS 将我的 CSS 放在新生成的元素上，但它不起作用。我什至在 JQuery 中使用 async 编程来确保在 <i> 更改为 <svg> 之前未应用 CSS
值得一提的是，原始 <i> 元素上的 CSS 类 从 font-awesome 注入到新的 <svg> 中...所以 CSS 动画是继承..这个逻辑适用于除Safari之外的所有浏览器......
我完全不知道是什么原因造成的，无论如何这里是整个页面的 html：
<!--Display none is changed to block when the page is done loading-->
<div id="landing" style="display:none">
<div id="navigation">
<img id="landing-logo" src="example.gif" alt="example">
<div class="tt-divider"></div>
<div id="page">
</div>
<div id="btm-right-nav">
<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
<i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
</div>
</div>
</div>
我想我可以让它工作，如果我只是猛拉我自己的 svg 并将它整齐地放在 <img> 中并且没有在我的按钮上做一些掩蔽魔法..我不想这样做是因为这会切断 fontawesome 的大量功能并花费更多时间...所以 与此同时我为 Safari 用户关闭了动画 很伤心因为我想要这个动画非常令人满意，我真的不想自己烘焙蒙版 SVG 并将它们放在 <img> 中，这样我就可以在 SVG 上 运行 CSS 动画...我的意思是..这是我必须做的吗？
我可以将内联 SVG 注入 src 吗？
这是页面加载后来自 fontawesome 的烘焙 SVG 数据（我取出了数据:)
<div id="btm-right-nav">
<svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-
hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-jyjnVEKbKq5c"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0"
y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-224 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)"
mask="url(#mask-
jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg>
<!--<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-
circle"
data-
fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="phone" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-
i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-eJs29EAdXlZv"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0" y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-256 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)"
mask="url(#mask-
eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%">
</rect></svg>
<!--<i class="fas fa-phone btm-right-ico" data-fa-
mask="fas
fa-circle" data-fa-transform="shrink-7"></i> Font Awesome
fontawesome.com-->
</div>
哇......真的希望这对某人有所帮助...
要解决此问题，您可以使用常规的旧 css 在动画中对其进行变换缩放。
字体大小 可用于在除 Safari
之外的所有浏览器上放大内联 SVG@-webkit-keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
@keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
底线：
使用 transform: scale() 而不是 font-size: ()px在 SVG CSS 动画上最大化兼容性。