主页 / 问题 / 1193330
Accepted
Monkey Mutant
Asked:2021-10-21 19:30:11 +0000 UTC2021-10-21 19:30:11 +0000 UTC

悬停在图像上时如何限制动画触发的宽度？

  • 772

悬停时SVG内部有一个图层，上面会出现带有图案的变形路径。如此设想，只有当悬停在 g.path 上时，悬停才会起作用，也就是说，当悬停在右侧的另一个图像上时，没有悬停！

如何绕过或纠正一种情况？

代码示例：

<svg viewBox="0 0 900 300">
  <defs>
    <style>
      .m {
        cursor: pointer;
        transform: translate(-200px, 0);
        opacity: 0;
        transition: 0.34s cubic-bezier(0, 0.96, 0.99, -0.19);
      }

      .path:hover .m {
        transform: translate(0, 0);
        opacity: 1;
      }

      text {
        font-family: sans-serif;
        font-size: 16px;
        fill: #fff;
      }

      line,
      circle {
        stroke: #fff;
        stroke-width: 2;
        fill: none;
      }

      .unit {
        font-size: 33px;
      }
    </style>
    <pattern id="ptn" viewBox="" width="100%" height="100%">
      <image href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-250" y="0" width="100%" height="100%" />
    </pattern>
  </defs>
  <defs>
    <mask id="a">
      <rect width="100%" height="100%" fill="#fff" />
      <path d="M0,0 550,0 400,300 0,300z" />
    </mask>

    <mask id="b">
      <rect width="100%" height="100%" fill="#fff" />
      <path d="M570,0 900,0 900,300 420,300z" />
    </mask>
  </defs>

    <image href="https://ada-remont.ru/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/%D0%9E%D0%B1%D0%BB%D0%B8%D1%86%D0%BE%D0%B2%D0%BA%D0%B0%20%D0%B4%D0%BE%D0%BC%D0%BE%D0%B2/obl2.jpg" x="" y="" x="0" y="0" width="900" height="300" mask="url(#a)" />

  <g class="path">

    
<image href="https://www.vipklinker.com.ua/sites/default/files/images/sbr003.jpg" x="0" y="0" width="900" height="300" mask="url(#b)" />

    <g class="m">
      <path d="M350,0 550,0 400,300 200,300z" fill="url(#ptn)" stroke="#fff" stroke-width="6" />

      <text x="270" y="260"> Монтаж</text>
      <text x="365" y="264" class="unit"> &rsaquo; </text>
      <line x1="265" x2="340" y1="270" y2="270" />
      <circle cx="370" cy="255" r="14" />
    </g>
  </g>
  

</svg>

html

1 个回答

  1. Best Answer

    如此设想，只有当悬停在 g.path 上时，悬停才会起作用，也就是说，当悬停在右侧的另一个图像上时，没有悬停！

    这种效果的主要原因是两个面具中的线条：

    <rect width="100%" height="100%" fill="#fff" />，它将遮罩的范围在宽度和高度上扩展了 100%。并且由于两个掩码具有相同的条件，因此它会在两个图像上触发，因为掩码的范围重叠。

    . 代替蒙版，用于裁剪图像clipPath。它在一个图像的左侧，第二个图像的右侧。

    因此，当只悬停在左侧图像上时，可以触发浮动图像动画：

    .imgLeft:hover ~ .m {
   opacity: 1;
   animation: move 1s 0.2s  forwards;
        }

    如有必要，您可以在将鼠标悬停在右侧图像上时触发动画：

    .imgRight:hover ~ .m {
   opacity: 1;
   animation: move 1s 0.2s  forwards;
        }

    在这个例子中替换transition为，它工作得更顺利。animation

    将图片链接替换为https://i.stack.imgur.com

    <svg viewBox="0 0 900 300">
  <defs>
    <style>
     .m {
        cursor: pointer;
        pointer-events:none;
         transform: translate(-570px, 0);
        opacity: 0.2;
        
      }

      .imgLeft {
      clip-path:url(#a);
      }
      .imgRight {
      clip-path:url(#b);
      }
      
      .imgLeft:hover ~ .m {
       opacity: 1;
        animation: move 1s 0.2s  forwards;
          }
      
      @keyframes move {
      0% {transform: translate(-570px, 0); }
      100% {transform: translate(0, 0); }
      }

      text {
        font-family: sans-serif;
        font-size: 16px;
        fill: #fff;
      }

      line,
      circle {
        stroke: #fff;
        stroke-width: 2;
        fill: none;
      }

      .unit {
        font-size: 33px;
      }
    </style>
     
   
  </defs>
  <defs>
    <clipPath id="a">
       <path fill="white" d="M0,0 570,0 420,300 0,300z" />
    </clipPath>

    <clipPath id="b">
      <path fill="black"  d="M570,0 900,0 900,300 420,300z" />
    </clipPath>
    
    <clipPath id="p" >
    <path fill="white"  d="M370,0 570,0 420,300 220,300z"  stroke="red" stroke-width="6" />
    </clipPath>
  </defs>
  
     <!-- Нижнее изображение (правое)   -->
   <image class="imgRight" href="https://isstatic.askoverflow.dev/wLWXh.jpg"  x="0" y="0" width="900" height="300"/>

<!-- Верхнее изображение (левое)   -->
<image class="imgLeft" href="https://isstatic.askoverflow.dev/M5yri.jpg" x="0" y="0" width="900" height="300"  />

<g class="m"  >
    <!-- Плавающее изображение -->
 <image pointer-events="none" href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-30" y="0"  width="100%" height="100%" clip-path="url(#p)" />   
   
       <!-- <path d="M350,0 550,0 400,300 200,300z" fill="none" stroke="#fff" stroke-width="6" />  -->
     
      <path fill="none"  d="M370,0 570,0 420,300 220,300z"  stroke="white" stroke-width="6" />
      <text x="280" y="260"> Монтаж</text>
      <text x="375" y="264" class="unit"> &rsaquo; </text>
      <line x1="275" x2="340" y1="270" y2="270" />
      <circle cx="380" cy="255" r="14" />
      
   
  </g>
    
</svg>

    淡入淡出选项

    <svg viewBox="0 0 900 300">
  <defs>
    <style>
     .m {
        cursor: pointer;
        pointer-events:none;
         transform: translate(-570px, 0);
        opacity: 0.2;
         transition: 1s;
      }

      .imgLeft {
      clip-path:url(#a);
      }
      .imgRight {
      clip-path:url(#b);
      }
      
      .imgLeft:hover ~ .m {
       opacity: 1;
        transform: translate(0, 0);
          }
      
     
      text {
        font-family: sans-serif;
        font-size: 16px;
        fill: #fff;
      }

      line,
      circle {
        stroke: #fff;
        stroke-width: 2;
        fill: none;
      }

      .unit {
        font-size: 33px;
      }
    </style>
     
   
  </defs>
  <defs>
    <clipPath id="a">
       <path fill="white" d="M0,0 570,0 420,300 0,300z" />
    </clipPath>

    <clipPath id="b">
      <path fill="black"  d="M570,0 900,0 900,300 420,300z" />
    </clipPath>
    
    <clipPath id="p" >
    <path fill="white"  d="M370,0 570,0 420,300 220,300z"  stroke="red" stroke-width="6" />
    </clipPath>
  </defs>
  
     <!-- Нижнее изображение (правое)   -->
   <image class="imgRight" href="https://isstatic.askoverflow.dev/wLWXh.jpg"  x="0" y="0" width="900" height="300"/>

<!-- Верхнее изображение (левое)   -->
<image class="imgLeft" href="https://isstatic.askoverflow.dev/M5yri.jpg" x="0" y="0" width="900" height="300"  />

<g class="m"  >
    <!-- Плавающее изображение -->
 <image pointer-events="none" href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-30" y="0"  width="100%" height="100%" clip-path="url(#p)" />   
   
       <!-- <path d="M350,0 550,0 400,300 200,300z" fill="none" stroke="#fff" stroke-width="6" />  -->
     
      <path fill="none"  d="M370,0 570,0 420,300 220,300z"  stroke="white" stroke-width="6" />
      <text x="280" y="260"> Монтаж</text>
      <text x="375" y="264" class="unit"> &rsaquo; </text>
      <line x1="275" x2="340" y1="270" y2="270" />
      <circle cx="380" cy="255" r="14" />
      
   
  </g>
    
</svg>

    • 3

相关问题