Question

我正在尝试使用CSS为简单的SVG自卸汽车制作动画。卡车应升降床。

为此，我向包含卡车底盘的docs/_templates/layout.html标签添加了一个类，然后添加了针对该组的css动画。床处于正确的位置，但是只要我使用{% extends '!layout.html' %} {% block document %} {{super()}} <a href="https://github.com/you"> <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> </a> {% endblock %}属性为其定型，其位置就会被拧紧。

我尝试过使用<g>和transform，因为大多数其他答案都建议使用它们，但我无法用这种方法来解决。

如何固定它以旋转床并使它与卡车的车身保持水平？

您可以在这里看到它：https://codepen.io/berlinquin/pen/VVWmNr

transform-box

transform-origin

Answer 1

有一个您被新转换覆盖的转换，您应该将其包括在动画中：

@keyframes drive-truck {
  0% {
    left: -210px;
  }
  70% {
    left: 70%;
  }
  90% {
    left: 70%;
  }
  100% {
    left: 100%;
  }
}

@keyframes dump-load {
  0% {
    transform: translate(-9.8677083px,-119.84723px);
  }
  40% {
    transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
  }
  60% {
    transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
  }
  100% {
    transform: translate(-9.8677083px,-119.84723px)
  }
}

#truck-container {
  width: 100%;
  overflow: hidden;
}

#truck-container .wrapper {
  position: relative;
  top: 0;
  /* left: -210px; */
  width: 200px;
  /*animation: drive-truck 5s linear infinite; */
}

#truck-container object {
  width: 200px;
}

#truck-container svg {
  width: 200px;
}

g.truck-bed {
  transform-origin: 14.3% 100%;
  transform-box: fill-box;
  animation: dump-load 5s linear infinite;
}

<div id="truck-container">
      <div class="wrapper">
      <!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
      <svg
         xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         id="svg8"
         version="1.1"
         viewBox="0 0 210.26479 80.152405"
         height="80.152405mm"
         width="210.26479mm">
        <defs
           id="defs2">
          <marker
             style="overflow:visible"
             id="Arrow1Lend"
             refX="0"
             refY="0"
             orient="auto">
            <path
               transform="matrix(-0.8,0,0,-0.8,-10,0)"
               style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
               d="M 0,0 5,-5 -12.5,0 5,5 Z"
               id="path6731" />
          </marker>
          <marker
             style="overflow:visible"
             id="Arrow1Lstart"
             refX="0"
             refY="0"
             orient="auto">
            <path
               transform="matrix(0.8,0,0,0.8,10,0)"
               style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
               d="M 0,0 5,-5 -12.5,0 5,5 Z"
               id="path6728" />
          </marker>
          <linearGradient
             id="wheel-3">
            <stop
               style="stop-color:#090000;stop-opacity:0;"
               offset="0"
               id="stop6086" />
            <stop
               id="stop6098"
               offset="0"
               style="stop-color:#090000;stop-opacity:0.49803922;" />
            <stop
               style="stop-color:#090000;stop-opacity:1;"
               offset="1"
               id="stop6084" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient6054">
            <stop
               id="stop6052"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient6032">
            <stop
               id="stop6030"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient5958">
            <stop
               id="stop5956"
               offset="0"
               style="stop-color:#4d4d4d;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             id="linearGradient5950">
            <stop
               id="stop5948"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <radialGradient
             gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             id="radialGradient6090"
             xlink:href="#wheel-3" />
          <radialGradient
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             id="radialGradient6722"
             xlink:href="#wheel-3" />
          <radialGradient
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             id="radialGradient6726"
             xlink:href="#wheel-3" />
        </defs>
        <metadata
           id="metadata5">
          <rdf:RDF>
            <cc:Work
               rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title></dc:title>
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g
           style="display:inline"
           transform="translate(-9.8677083,-206.84723)"
           id="layer1">
          <path
             id="rect6676"
             d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
             style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
          <circle
             r="9.8768148"
             cy="276.99982"
             cx="-209.99982"
             id="circle6724"
             style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             transform="scale(-1,1)" />
          <circle
             style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             id="circle6720"
             cx="-59.999817"
             cy="276.99982"
             r="9.8768148"
             transform="scale(-1,1)" />
          <circle
             r="9.8768148"
             cy="276.99982"
             cx="-29.999817"
             id="circle6655"
             style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             transform="scale(-1,1)" />
          <path
             id="path6058"
             d="m 30,268 c 0,-6 0,-6 0,-6 z"
             style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
        </g>
        <g
           transform="translate(-9.8677083,-119.84723)"
           style="display:inline"
           id="layer2">
          <path
             id="path6679"
             d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
             style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
          <path
             id="path5324"
             d="m 185,150 h -20 v -15 h 12.5 z"
             style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
        </g>
        <g
           class="truck-bed"
           transform="translate(-9.8677083,-119.84723)"
           style="display:inline"
           id="layer3">
          <path
             id="path5327"
             d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
             style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
        </g>
      </svg>

    </div>
</div>

或者考虑另一个g元素，您可以在其中应用旋转，而无需在动画中包含平移：

@keyframes drive-truck {
  0% {
    left: -210px;
  }
  70% {
    left: 70%;
  }
  90% {
    left: 70%;
  }
  100% {
    left: 100%;
  }
}

@keyframes dump-load {
  0% {
    transform: none;
  }
  40% {
    transform: rotate(-20deg) ;
  }
  60% {
    transform: rotate(-20deg) ;
  }
  100% {
    transform: none
  }
}

#truck-container {
  width: 100%;
  overflow: hidden;
}

#truck-container .wrapper {
  position: relative;
  top: 0;
  /* left: -210px; */
  width: 200px;
  /*animation: drive-truck 5s linear infinite; */
}

#truck-container object {
  width: 200px;
}

#truck-container svg {
  width: 200px;
}

g.truck-bed {
  transform-origin: 14.3% 100%;
  transform-box: fill-box;
  animation: dump-load 5s linear infinite;
}

<div id="truck-container">
      <div class="wrapper">
      <!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
      <svg
         xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         id="svg8"
         version="1.1"
         viewBox="0 0 210.26479 80.152405"
         height="80.152405mm"
         width="210.26479mm">
        <defs
           id="defs2">
          <marker
             style="overflow:visible"
             id="Arrow1Lend"
             refX="0"
             refY="0"
             orient="auto">
            <path
               transform="matrix(-0.8,0,0,-0.8,-10,0)"
               style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
               d="M 0,0 5,-5 -12.5,0 5,5 Z"
               id="path6731" />
          </marker>
          <marker
             style="overflow:visible"
             id="Arrow1Lstart"
             refX="0"
             refY="0"
             orient="auto">
            <path
               transform="matrix(0.8,0,0,0.8,10,0)"
               style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
               d="M 0,0 5,-5 -12.5,0 5,5 Z"
               id="path6728" />
          </marker>
          <linearGradient
             id="wheel-3">
            <stop
               style="stop-color:#090000;stop-opacity:0;"
               offset="0"
               id="stop6086" />
            <stop
               id="stop6098"
               offset="0"
               style="stop-color:#090000;stop-opacity:0.49803922;" />
            <stop
               style="stop-color:#090000;stop-opacity:1;"
               offset="1"
               id="stop6084" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient6054">
            <stop
               id="stop6052"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient6032">
            <stop
               id="stop6030"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             osb:paint="solid"
             id="linearGradient5958">
            <stop
               id="stop5956"
               offset="0"
               style="stop-color:#4d4d4d;stop-opacity:1;" />
          </linearGradient>
          <linearGradient
             id="linearGradient5950">
            <stop
               id="stop5948"
               offset="0"
               style="stop-color:#000000;stop-opacity:1;" />
          </linearGradient>
          <radialGradient
             gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             id="radialGradient6090"
             xlink:href="#wheel-3" />
          <radialGradient
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             id="radialGradient6722"
             xlink:href="#wheel-3" />
          <radialGradient
             r="10"
             fy="277"
             fx="200"
             cy="277"
             cx="200"
             gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
             gradientUnits="userSpaceOnUse"
             id="radialGradient6726"
             xlink:href="#wheel-3" />
        </defs>
        <metadata
           id="metadata5">
          <rdf:RDF>
            <cc:Work
               rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title></dc:title>
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g
           style="display:inline"
           transform="translate(-9.8677083,-206.84723)"
           id="layer1">
          <path
             id="rect6676"
             d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
             style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
          <circle
             r="9.8768148"
             cy="276.99982"
             cx="-209.99982"
             id="circle6724"
             style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             transform="scale(-1,1)" />
          <circle
             style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             id="circle6720"
             cx="-59.999817"
             cy="276.99982"
             r="9.8768148"
             transform="scale(-1,1)" />
          <circle
             r="9.8768148"
             cy="276.99982"
             cx="-29.999817"
             id="circle6655"
             style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
             transform="scale(-1,1)" />
          <path
             id="path6058"
             d="m 30,268 c 0,-6 0,-6 0,-6 z"
             style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
        </g>
        <g
           transform="translate(-9.8677083,-119.84723)"
           style="display:inline"
           id="layer2">
          <path
             id="path6679"
             d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
             style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
          <path
             id="path5324"
             d="m 185,150 h -20 v -15 h 12.5 z"
             style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
        </g>
        <g class="truck-bed"><g
           
           transform="translate(-9.8677083,-119.84723)"
           style="display:inline"
           id="layer3">
          <path
             id="path5327"
             d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
             style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
        </g></g>
      </svg>

    </div>
</div>

如何旋转svg组并保持其相对位置？

1 个答案: