SVG 动画 - 如何反转此 svg 路径中​​的起点和终点?

SVG Animation - How can I reverse the start and end points in this svg path?

所以我正在为图标创建一些小动画。我想贴上 svg,因为它们只是一些小的线条动画。

.svg 在 html 文档中。 css 具有线条和动画的样式。

https://jsfiddle.net/pd9ux6e7/

所以现在我得到了什么。我得到了这条绘图线,就像我想要的一样。唯一困扰我的是动画开始和结束的方式。现在它从右下角到左上角。但是我想从左上到右下(就像你读的那样,从左到右感觉更自然)

知道如何解决这个问题吗?我认为它在 svg 路径中​​的某个地方,但我知道这些值代表什么。这是 svg <path class="st3" d="M1194.1,777.2H7c-2.8,0-5-2.2-5-5V35.9" />

中的蓝线

我反转了路径,这反转了动画。路径的长度也是 1932,所以在 css 中我使用这个值。

.st0 {
  fill: #ffffff;
}

.st1 {
  fill: none;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #ffffff;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st3 {
  fill: none;
  stroke: #2646ff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

#Streep .st3 {
  stroke-dasharray: 1932;
  stroke-dashoffset: 0;
  animation: dash 8s ease-in-out;
  animation-direction: reverse;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1932;
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 780" style="enable-background:new 0 0 1200 780;" xml:space="preserve">
          <g id="Layer_1"></g>
          <g id="Layer_6">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
                <path
                  class="st1"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
              </g>
              <line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
              <ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
            </g>
          </g>
          <g id="Layer_5">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
            </g>
          </g>
          <g id="Layer_4">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
            </g>
          </g>
          <g id="Streep">
            <g>
              <path class="st3" d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2" />
            </g>
          </g>
        </svg>

不需要反转路径定义。只需反转 dashoffset 动画即可。

#Streep .st3 {
    stroke-dasharray: 1932;
    stroke-dashoffset: -1932;
    animation: dash 8s ease-in-out;
    animation-direction: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

这适用于大多数浏览器,但遗憾的是不适用于 Safari,它有一个错误,它不接受负的 dashoffsets。

要解决这个问题,只需将您的 dashoffset 值向上移动 (dashlength + dashgap) = 1932 + 1932 = 3864。

#Streep .st3 {
    stroke-dasharray: 1932;
    stroke-dashoffset: 1932;
    animation: dash 8s ease-in-out;
    animation-direction: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 3864;
  }
}

结果:

svg { width: 500px; }
.st0 {
              fill: #ffffff;
    }

.st1 {
              fill: none;
              stroke: #afafaf;
              stroke-width: 4;
              stroke-miterlimit: 10;
            }

            .st2 {
              fill: #ffffff;
              stroke: #afafaf;
              stroke-width: 4;
              stroke-miterlimit: 10;
            }

            .st3 {
              fill: none;
              stroke: #2646ff;
              stroke-width: 7;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-miterlimit: 10;
            }

#Streep .st3 {
    stroke-dasharray: 1932;
    stroke-dashoffset: 1932;
    animation: dash 8s ease-in-out;
    animation-direction: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 3864;
  }
}
<svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 1200 780"
          style="enable-background:new 0 0 1200 780;"
          xml:space="preserve"
        >
          <g id="Layer_1"></g>
          <g id="Layer_6">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
                <path
                  class="st1"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
              </g>
              <line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
              <ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
            </g>
          </g>
          <g id="Layer_5">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
            </g>
          </g>
          <g id="Layer_4">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
            </g>
          </g>
          <g id="Streep">
            <g>
              <path class="st3" d="M1194.1,777.2H7c-2.8,0-5-2.2-5-5V35.9" />
            </g>
          </g>
        </svg>