如何在不視覺移動位置的情況下為svg內的（路徑）元素設定影片以放大和縮小

我有一個 svg，其中包含一些看起來像這樣的元素：

我想創建一個影片，其中每個元素一個接一個地“脈沖”（大小增長約 20%，然后恢復到正常大小而不移動到不同的位置），重復回圈。

我開始為此創建一個 css 影片，但我添加縮放影片的嘗試顯然沒有使用正確的中心點，因為每次縮放移動都會將該元素移動到不同的位置。

我嘗試探索屬性 transform-origin 的不同值，但似乎都沒有達到預期的行為。

我已經包含了一個演示行為，它顯示了行為：

#Ellipse_1 {
  /* No transform-origin */
  animation: pulse 2s linear infinite alternate;
  animation-delay: 2.6s fill-opacity: 50%;
}

#Ellipse_2 {
  /* transform-origin same as circle's center location */
  transform-origin: 4 8;
  fill-opacity: 50%;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 3.4s
}

#Ellipse_3 {
  /* Trying transform-origin center center keyword */
  transform-origin: center center;
  fill-opacity: 50%;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 3s
}

#Path_1 {
  /* Trying transform-origin center keyword */
  transform-origin: center;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 4s
}

#Path_2 {
  /* This goes off screen as soon as animation starts */
  animation: pulse 2s linear infinite alternate;
  animation-delay: 4s
}

@keyframes pulse {
  0% {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
  }
}

<svg id="shapes" data-name="shapes data" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 100 100">
      <circle id="Ellipse_1" data-name="Ellipse 1" cx="2.083" cy="2.083" r="2.083" transform="translate(14 3)" fill="red"/>
      <path id="Path_1" data-name="Path 259" d="M60.749,74.282a103.267,103.267,0,0,0-5.686,23.5.459.459,0,0,1-.455.408H48.887a.46.46,0,0,1-.453-.38l-3.1-17.357a.458.458,0,0,1,.321-.519A75.754,75.754,0,0,0,60.24,73.846C60.708,73.591,60.936,73.783,60.749,74.282Z" transform="translate(-45.326 -63.944)" fill-rule="evenodd" fill="green"/>
      <circle id="Ellipse_2" data-name="Ellipse 2" cx="2.083" cy="2.083" r="2.083" transform="translate(4 8)" fill="blue"/>
      <circle id="Ellipse_3" data-name="Ellipse 3" cx="1.62" cy="1.62" r="1.62" transform="translate(21.942)" fill="green"/>
      <path id="Path_2" data-name="Path 2" d="M97.486,54.462C94.879,58.549,90.751,66.907,88.6,81.11a.6.6,0,0,1-.572.505,16.478,16.478,0,0,0-8.995,3.049.355.355,0,0,1-.562-.322,90.68,90.68,0,0,1,6.77-25.419.966.966,0,0,1,.352-.4q1.521-.866,3.1-1.629a.016.016,0,0,1,.009,0,50.611,50.611,0,0,1,8.261-3.124h0A.465.465,0,0,1,97.486,54.462Z" transform="translate(-66.545 -51.149)" fill-rule="evenodd" fill="red"/>
    </svg>

uj5u.com熱心網友回復：

當您“覆寫”transform使用 CSS 時，將translate被洗掉。在這里，我將 transform/translate 移到了 parent <g>。因此，每個元素都使用轉換移動<g>，然后使用 CSS 縮放每個元素。

圓圈很容易縮放，因為它們的原點已經在中心，但其他形狀需要移動以使 0,0 位于中心（更改 d 屬性中的所有值）或用于transform-origin移動原點。我猜這里的結果是一個組合 - 可以優化（取決于你:-)）。

#Ellipse_1 {
  /* No transform-origin */
  animation: pulse 2s linear infinite alternate;
  animation-delay: 2.6s fill-opacity: 50%;
}

#Ellipse_2 {
  /* transform-origin same as circle's center location */
  fill-opacity: 50%;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 3.4s
}

#Ellipse_3 {
  /* Trying transform-origin center center keyword */
  fill-opacity: 50%;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 3s
}

#Path_1 {
  /* Trying transform-origin center keyword */
  transform-origin: 50px 80px;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 4s
}

#Path_2 {
  /* This goes off screen as soon as animation starts */
  transform-origin: 80px 70px;
  animation: pulse 2s linear infinite alternate;
  animation-delay: 4s
}

@keyframes pulse {
  0% {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }
}

<svg id="shapes" data-name="shapes data" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g transform="translate(14 3)">
    <circle id="Ellipse_1" data-name="Ellipse 1" cx="2.083" cy="2.083" r="2.083" fill="red"/>
  </g>
  <g transform="translate(-45.326 -63.944)">
    <path id="Path_1" data-name="Path 259" d="M60.749,74.282a103.267,103.267,0,0,0-5.686,23.5.459.459,0,0,1-.455.408H48.887a.46.46,0,0,1-.453-.38l-3.1-17.357a.458.458,0,0,1,.321-.519A75.754,75.754,0,0,0,60.24,73.846C60.708,73.591,60.936,73.783,60.749,74.282Z" fill-rule="evenodd" fill="green"/>
  </g>
  <g transform="translate(4 10)">
    <circle id="Ellipse_2" data-name="Ellipse 2" r="2.083"  fill="blue"/>
  </g>
  <g transform="translate(22 3)">
    <circle id="Ellipse_3" data-name="Ellipse 3" r="1.62"  fill="green"/>
  </g>
  <g transform="translate(-66.545 -51.149)">
    <path id="Path_2" data-name="Path 2" d="M97.486,54.462C94.879,58.549,90.751,66.907,88.6,81.11a.6.6,0,0,1-.572.505,16.478,16.478,0,0,0-8.995,3.049.355.355,0,0,1-.562-.322,90.68,90.68,0,0,1,6.77-25.419.966.966,0,0,1,.352-.4q1.521-.866,3.1-1.629a.016.016,0,0,1,.009,0,50.611,50.611,0,0,1,8.261-3.124h0A.465.465,0,0,1,97.486,54.462Z"  fill-rule="evenodd" fill="red"/>
  </g>
</svg>

標籤：css svg CSS动画 svg-动画

上一篇：使svg色標適合父div的大小

下一篇：使用剪輯路徑生成倒圓弧