0

我正在做 svg 路径动画，它在除 safari 和 IE 之外的所有浏览器中都能正常工作

svg 示例


  <svg
      v-if="waveid == 6"
      class="gotthard-red-pipe"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 732.36 411.6"
    >
      <g id="Ebene_2" data-name="Ebene 2">
        <g id="Ebene_20" data-name="Ebene 20">
          <rect class="bg-transparent" width="732.36" height="411.6" />
        </g>
        <g id="_2._Roehre" data-name="2. Roehre">
          <g id="_2._Roehre_right_to_left" data-name="2. Roehre right to left">
            <g id="_2_Roehre_bg" data-name="2_Roehre_bg">
              <path
                :id="'wave' + waveid"
                filter="url(#innershadow)"
                class="gothard-p3"
                stroke="url(#img1)"
                d="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
              />
            </g>
            <g style="transform: translateY(-55px);">
              <foreignObject
                width="30"
                height="80"
                transform="translate(-12 -24)"
              >
                <div class="valueSpan-wrapper">
                  <div
                    xmlns="http://www.w3.org/1999/xhtml"
                    class="valueSpan"
                    :id="'valueSpan' + waveid"
                  ></div>
                </div>
              </foreignObject>
              <animateMotion
                :id="'motion' + waveid"
                dur="1s"
                 :repeatCount=" percentageCustom  / 100"
                fill="freeze"
                path="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
              ></animateMotion>
            </g>
          </g>
        </g>
      </g></svg

此代码在 vue.js 中完成 问题在外来对象中，它应该在相同的路径上进行动画处理

css

.gotthard-blue-pipe,
.gotthard-green-pipe,
.gotthard-red-pipe {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}


.textContainer {
  width: 90%;
}

.z1{
  position: absolute;
  z-index: 999;
}
.z2{
  position: absolute;
  z-index: 998;
}
.valueSpan-wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}
.valueSpan {
  position: absolute;
  background-color: white;
  border: 1px solid $color4;
  padding: 2px;
  transform: skew(15deg, 320deg) rotate(15deg);
  z-index: 99;
  color: #4b4d53;
  font-weight: 600;
  width: 30px;
  font-size: 8px;
  text-align: center;
  bottom: 30px;
  left: 0 !important;
  .stand {
    height: 1px;
    width: 50px;
    background: #87888d;
    position: absolute;
    transform: rotate(90deg) translateX(28px) translateY(25px);
  }
}

是否可以在野生动物园中以这种方式为异物设置动画，或者我必须使用不同的方法？

4

0 回答 0