Question

我正在尝试制作svg动画，如该演示所示，当我缩放svg的电荷填充时，它被推到了容器的左边缘。

是否可以将路径的x，y属性保留在svg中？还是我的svg无法正确设置动画？

.svg {
  width: 40%;
}

#charge {
  /* animation: charge 1s ease infinite; */
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
                <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
                <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
              </svg>
</div>

Answer 1

您可以使用transform-origin属性来更改变换元素的位置。默认值为50％，50％，使转换从元素的中间开始。

.svg {
  width: 40%;
}

#charge {
  transform-origin: 10px;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
     <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
   </svg>
</div>

Answer 2

您可以改为对width进行动画处理，以获得所需的效果：

.svg {
  width: 40%;
}

#charge {
  width: 10px;
  height: 80px;
  animation: charge 1s ease infinite;
}

@keyframes charge {
  0% {
    width: 0;
  }
  100% {
    width: 180px;
  }
}

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
   <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
   <rect id="charge" x="10" y="10" fill="#0071BC"/>
  </svg>
</div>

Answer 3

为避免在transform-origin上设置像素值，您还可以调整transform-box以使transform-origin相对于元素而不是相对于整个SVG：

.svg {
  width: 40%;
}

#charge {
  transform-origin: left;
  transform-box:fill-box;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
     <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
   </svg>
</div>

css缩放SVG移动元素

3 个答案: