具有奇怪定义和 CSS 动画的 SVG

Question

最近我开始在别人创建的 SVG 定义上尝试 CSS 动画，我发现了一些我自己无法解决的问题。考虑到我对 SVG 的了解不多，Google 很难找到解决方案。

这是我得到的：

@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> 逆时针旋转。

但是如果您取消注释动画行，您会注意到，在旋转的某些角度，顶点会消失，就像整个 SVG 位于具有某种背景的东西后面（就像我们通常使用溢出所做的技巧一样） .

从我能挖掘出来的一点点，我开始认为问题出在<svg> 定义上。在我见过的所有例子中，没有一个是那样的。我尝试按照几个教程的建议删除width 和height 属性，甚至增加viewBox 或添加一些填充（这真的是盲目的），但没有任何改变。

可能出了什么问题？

Answer 1

增加viewBox 解决了我这边的问题：

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>