Question

＆＃13;

<!DOCTYPE HTML> 
<html lang="ru">
<head>
 <title></title>
 </head>
 <style> 
 svg{
  overflow:hidden;
 }
  defs:hover{
    transform:scale(1.2);
  }
 </style>
<body style="background:url(http://namonitore.ru/uploads/catalog/znamenitosti/karolina_kurkova__i_devushki_v_bikini_1280.jpg); background-size:cover;">



<svg width="400" height="240">
  <polygon points="10 220, 10 10, 280 10,380 220"
  style="fill:green; stroke:green; stroke-width:3; opacity="1" />

</svg>



<svg width="400" height="240" style="position:relative; left:-120px;">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
            <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
        </pattern>
    </defs>
  <polygon points="110 220,10 10,380 10,380 220"
  style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>

</body>
</html>

＆＃13;

当你将鼠标悬停在女孩身上时，效果就像是背景位置一样。我不太懂英语，但要问更长的人。当你将鼠标悬停在女孩的图像上时如何制作缩放效果？

Answer 1

如果我正确理解了您的问题，那么您应该在<defs>元素旁边的多边形中添加一个类，添加一个类并在该多边形上使用css。对于例如：

<svg width="400" height="240" style="position:relative; left:-120px;">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
            <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
        </pattern>
    </defs>
  <polygon class="girls" points="110 220,10 10,380 10,380 220"
  style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>

然后在你的CSS而不是：

defs:hover{
    transform:scale(1.2);
  }

这样做：

polygon.grils:hover{
    transform:scale(1.2);
  }

如何对模式进行悬停效果？

1 个答案: