為什么svganimateTransform只在第一個專案上激活？-有解無憂

當第一個專案懸停時，其他專案也會激活。但是當第二個專案懸停時，其他專案將不起作用。如何讓每一個item影片一個一個觸發？

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.bubble-wrap {
  width: 400px
}

<div class="bubble-wrap">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="position: relative;" id="clip_svg_wrap">
          <clipPath id="clipPath1" transform="translate(100 100) scale(0.8)">
            <path d="M44.7,-77.9C57.7,-70,67.8,-57.5,76.2,-43.7C84.6,-30,91.4,-15,92.7,0.8C94.1,16.5,89.9,33,81.3,46.4C72.7,59.8,59.6,70.2,45.3,77.5C31,84.8,15.5,89.2,-0.1,89.4C-15.7,89.5,-31.4,85.6,-44.7,77.7C-57.9,69.7,-68.8,57.8,-75.6,44.2C-82.4,30.6,-85.3,15.3,-84.7,0.3C-84.1,-14.7,-80.2,-29.3,-72.9,-42.1C-65.6,-55,-55,-65.9,-42.3,-74C-29.6,-82,-14.8,-87.1,0.5,-88.1C15.9,-89,31.8,-85.8,44.7,-77.9Z" transform="scale(2)">
              <animateTransform attributeName="transform" attributeType="XML" type="scale" from="3 3" to="1 1" begin="clip_svg_wrap.mouseenter" dur="1s" repeatCount="1" fill="freeze"/>
              <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="3 3" begin="clip_svg_wrap.mouseleave" dur="1.5s" repeatCount="1" fill="freeze"/>
            </path>
          </clipPath>
          <image href="https://images.unsplash.com/photo-1639569266292-0c11a1dcb91c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTgwMTgzMA&ixlib=rb-1.2.1&q=85" clip-path="url(#clipPath1)" width='100%' height='100%' style="position: relative;"></image>
        </svg>
</div>

<div class="bubble-wrap">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="position: relative;" id="clip_svg_wrap">
          <clipPath id="clipPath1" transform="translate(100 100) scale(0.8)">
            <path d="M44.7,-77.9C57.7,-70,67.8,-57.5,76.2,-43.7C84.6,-30,91.4,-15,92.7,0.8C94.1,16.5,89.9,33,81.3,46.4C72.7,59.8,59.6,70.2,45.3,77.5C31,84.8,15.5,89.2,-0.1,89.4C-15.7,89.5,-31.4,85.6,-44.7,77.7C-57.9,69.7,-68.8,57.8,-75.6,44.2C-82.4,30.6,-85.3,15.3,-84.7,0.3C-84.1,-14.7,-80.2,-29.3,-72.9,-42.1C-65.6,-55,-55,-65.9,-42.3,-74C-29.6,-82,-14.8,-87.1,0.5,-88.1C15.9,-89,31.8,-85.8,44.7,-77.9Z" transform="scale(2)">
              <animateTransform attributeName="transform" attributeType="XML" type="scale" from="3 3" to="1 1" begin="clip_svg_wrap.mouseenter" dur="1s" repeatCount="1" fill="freeze"/>
              <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="3 3" begin="clip_svg_wrap.mouseleave" dur="1.5s" repeatCount="1" fill="freeze"/>
            </path>
          </clipPath>
          <image href="https://images.unsplash.com/photo-1639972585193-e360d1bd1dd2?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTgwMTgzMA&ixlib=rb-1.2.1&q=85" clip-path="url(#clipPath1)" width='100%' height='100%' style="position: relative;"></image>
        </svg>
</div>

uj5u.com熱心網友回復：

在此示例中，每個影像都有一個 SVG 元素。這包括<image>具有唯一 id 的 a 和<defs>定義剪輯路徑的位置。也有一個唯一的<clipPath>ID。結果是唯一的影像正在使用唯一的剪輯路徑，并且影片是參考該特定影像開始和結束的。

如果有許多影像需要此剪輯路徑，我們可以同意這不是最佳解決方案。重用已定義的剪輯路徑會更好，但正如您發現的那樣，所有影像的“通用”剪輯路徑將同時為所有影像上的剪輯路徑設定影片。我對此進行了研究，還嘗試了一些 JavaScript 并閱讀了 begin-value 的規范，但沒有任何解決此問題的線索。

使用基于 CSS 的影片可能是一個解決方案，但同時它也限制了你在這樣的設定中可以做的事情。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.bubble-wrap {
  width: 400px
}

<div class="bubble-wrap">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="position: relative;">
    <defs>
    <clipPath id="clipPath1" transform="translate(100 100)">
      <path d="M44.7,-77.9C57.7,-70,67.8,-57.5,76.2,-43.7C84.6,-30,91.4,-15,92.7,0.8C94.1,16.5,89.9,33,81.3,46.4C72.7,59.8,59.6,70.2,45.3,77.5C31,84.8,15.5,89.2,-0.1,89.4C-15.7,89.5,-31.4,85.6,-44.7,77.7C-57.9,69.7,-68.8,57.8,-75.6,44.2C-82.4,30.6,-85.3,15.3,-84.7,0.3C-84.1,-14.7,-80.2,-29.3,-72.9,-42.1C-65.6,-55,-55,-65.9,-42.3,-74C-29.6,-82,-14.8,-87.1,0.5,-88.1C15.9,-89,31.8,-85.8,44.7,-77.9Z" transform="scale(2)">
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to=".5" begin="img1.mouseenter" dur="1s" repeatCount="1" fill="freeze"/>
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from=".5" to="2" begin="img1.mouseleave" dur="1.5s" repeatCount="1" fill="freeze"/>
      </path>
    </clipPath>
  </defs>
    <image id="img1" href="https://images.unsplash.com/photo-1639569266292-0c11a1dcb91c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTgwMTgzMA&ixlib=rb-1.2.1&q=85" clip-path="url(#clipPath1)" width='100%' height='100%' style="position: relative;"/>
  </svg>
</div>

<div class="bubble-wrap">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="position: relative;">
    <defs>
    <clipPath id="clipPath2" transform="translate(100 100)">
      <path d="M44.7,-77.9C57.7,-70,67.8,-57.5,76.2,-43.7C84.6,-30,91.4,-15,92.7,0.8C94.1,16.5,89.9,33,81.3,46.4C72.7,59.8,59.6,70.2,45.3,77.5C31,84.8,15.5,89.2,-0.1,89.4C-15.7,89.5,-31.4,85.6,-44.7,77.7C-57.9,69.7,-68.8,57.8,-75.6,44.2C-82.4,30.6,-85.3,15.3,-84.7,0.3C-84.1,-14.7,-80.2,-29.3,-72.9,-42.1C-65.6,-55,-55,-65.9,-42.3,-74C-29.6,-82,-14.8,-87.1,0.5,-88.1C15.9,-89,31.8,-85.8,44.7,-77.9Z" transform="scale(2)">
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to=".5" begin="img2.mouseenter" dur="1s" repeatCount="1" fill="freeze"/>
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from=".5" to="2" begin="img2.mouseleave" dur="1.5s" repeatCount="1" fill="freeze"/>
      </path>
    </clipPath>
  </defs>
    <image id="img2" href="https://images.unsplash.com/photo-1639972585193-e360d1bd1dd2?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTgwMTgzMA&ixlib=rb-1.2.1&q=85" clip-path="url(#clipPath2)" width='100%' height='100%' style="position: relative;"/>
  </svg>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410812.html

標籤：

上一篇：SVG背景在懸停時閃爍一次

下一篇：在svg代碼中合并純CSS3維球體