SVG具有奇怪的定义和CSS动画 [英] SVG with odd definitions and CSS Animation
本文介绍了SVG具有奇怪的定义和CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近，我开始根据别人创建的SVG定义尝试CSS动画，但发现自己无法解决的问题.鉴于我对SVG的了解很少，因此Google很难找到解决方案.
Recently I began experimenting with CSS Animations over an SVG definition created by someone else and I found something I could n't solve by myself. And given my little about SVG, it was hard to Google a solution.
这就是我所拥有的:
@charset "utf-8";
body, html{
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
/*animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;*/
}
.right {
transform-origin: 605px 555px;
/*animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;*/
}
@keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 796.209 765.469" enable-background="new 0 0 796.209 765.469" xml:space="preserve">
<g>
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
这是静态的，我知道，我已经注释掉了动画部分，在此早期阶段，它只是使<path>逆时针旋转.
It's static, I know, I've commented out the animation part which, in this early stage, is simply to make the <path> spin counter-clockwise.
但是，如果取消注释动画线，您会注意到，在某些旋转角度处，顶点会消失，就像整个SVG位于具有某种背景的物体后面一样(例如我们通常会用溢出来做的技巧)
But if you uncomment the animation lines you'll notice that, at some angles of the rotation, the vertices disappear, like if the whole SVG is behind something with some sort of background (like the tricks we usually do with overflow).
从我可以挖掘的一点开始，我开始认为问题出在<svg>定义上.在我所看到的所有示例中，没有一个是那样的.我尝试按照一些教程的建议删除width和height属性，甚至增加了viewBox或添加了一些填充(这确实是盲目的)，但没有任何改变.
From the little I could dig up, I came to think that the problem is with the <svg> definition. In all examples I've seen, none of them was like that. I tried removing the width and height attributes as several tutorials suggested and even increasing the viewBox or add some padding (that was really a blind-shot) but nothing changed.
可能有什么问题吗?
推荐答案
增加viewBox可以解决我这方面的问题:
Increasing the viewBox solves the issue on my side:
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
@keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g>
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
这篇关于SVG具有奇怪的定义和CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
