代码之家 › 专栏 › 技术社区 › Bruno Augusto

奇异定义的SVG和CSS动画

css-animations svg css

Bruno Augusto · 技术社区 · 8 年前

最近,我开始尝试使用CSS动画来处理其他人创建的SVG定义,我发现了一些我自己无法解决的问题。鉴于我对SVG的了解,谷歌很难找到解决方案。

以下是我得到的:

@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 或者添加一些填充物(这真的是一个盲镜头),但没有改变。

可能有什么问题?

1 回复 | 直到 8 年前

Temani Afif 8 年前

增加 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>