javascript - 如何使用 SVG 更改鼠标悬停时的图像源？

标签 javascript html css image svg

我将 sm 图像分成五个不同的三 Angular 形。我试图在悬停时更改图像的 src 属性值，并在中心方 block 中显示悬停的图像。

这就是我想要做的，但是使用 SVG:How to change an image source on hover? 

.overlay {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay use {
  opacity: 0;
  transition: all 0.4s linear;
}

.overlay use:hover {
  opacity: 1;
}

.vr-head-tilt {
  position: relative;
}

.big img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.overlay .vr-images1:hover~.big .default {
  opacity: 0;
}

.overlay .vr-images1:hover~.big>img:nth-child(1) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images2:hover~.big>img:nth-child(2) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images3:hover~.big>img:nth-child(3) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images4:hover~.big>img:nth-child(4) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images5:hover~.big>img:nth-child(5) {
  z-index: 5;
  opacity: 1;
}

.big {
  position: relative;
}

.big img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 7%);
  opacity: 0;
  transition: .2s .1s ease-out;
}

.big .default {
  opacity: 1;
}
<svg class="overlay" viewBox="0 0 200 100">
            <defs>
                <clipPath id='clip-1'>
                <polygon points="0,100 100,100 0,50"/>
                </clipPath>
                <clipPath id='clip-2'>
                <polygon points="0,50 100,100 50,00 0,0"/>
                </clipPath>
                <clipPath id='clip-3'>
                <polygon points="100,100 50,00 150,0"/>
                </clipPath>
                <clipPath id='clip-4'>
                <polygon points="100,100 200,50 200,0 150,0"/>
                </clipPath>
                <clipPath id='clip-5'>
                <polygon points="100,100 200,100, 200,50"/>
                </clipPath>
                <image id="img" x="0" y="0" width="200" height="100" preserveAspectRatio="xMidYMid slice"
                xlink:href="https://picsum.photos/id/1/1000/800" />
            </defs>
            <use xlink:href="#img" class="vr-images1" clip-path="url(#clip-1)"/>
            <use xlink:href="#img" class="vr-images2" clip-path="url(#clip-2)"/>
            <use xlink:href="#img" class="vr-images3" clip-path="url(#clip-3)"/>
            <use xlink:href="#img" class="vr-images4" clip-path="url(#clip-4)"/>
            <use xlink:href="#img" class="vr-images5" clip-path="url(#clip-5)"/>
        </svg>
<div class="box"></div>
<div class='big'>
  <img src="https://i.ibb.co/rxX8VMq/left.png" class='default'>
  <img src="https://i.ibb.co/r77CrCC/topleft.png">
  <img src="https://i.ibb.co/CzRdRtp/top.png">
  <img src="https://i.ibb.co/L8cSs3p/topright.png">
  <img src="https://i.ibb.co/D1cjqfD/right.png">
</div>

当我们将鼠标悬停在每个多边形上时，中心图像应该会发生变化。

最佳答案

您可以简单地使用 javascript 并在您的 元素上监听 mouseenter 事件:

const sources = [
  "rxX8VMq/left.png",
  "r77CrCC/topleft.png",
  "CzRdRtp/top.png",
  "L8cSs3p/topright.png",
  "D1cjqfD/right.png"
];
document.querySelectorAll('use[class^="vr-images"]').forEach(elem => {
  elem.addEventListener('mouseenter', updateImageSrc);
});

function updateImageSrc(evt) {
  const index = parseInt(this.classList[0].replace('vr-images', '')) || 1;
  const src = "https://i.ibb.co/" + sources[index - 1];
  document.querySelector('img').src = src;
}
.overlay {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay use {
  opacity: 0;
  transition: all 0.4s linear;
}

.overlay use:hover {
  opacity: 1;
}

.vr-head-tilt {
  position: relative;
}

.big img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.big {
  position: relative;
}

.big img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 7%);
  opacity: 0;
  transition: .2s .1s ease-out;
}

.big .default {
  opacity: 1;
}
<svg class="overlay" viewBox="0 0 200 100">
  <defs>
    <clipPath id='clip-1'>
      <polygon points="0,100 100,100 0,50"/>
    </clipPath>
    <clipPath id='clip-2'>
      <polygon points="0,50 100,100 50,00 0,0"/>
    </clipPath>
    <clipPath id='clip-3'>
      <polygon points="100,100 50,00 150,0"/>
    </clipPath>
    <clipPath id='clip-4'>
      <polygon points="100,100 200,50 200,0 150,0"/>
    </clipPath>
    <clipPath id='clip-5'>
      <polygon points="100,100 200,100, 200,50"/>
    </clipPath>
    <image id="img" x="0" y="0" width="200" height="100" preserveAspectRatio="xMidYMid slice"
    xlink:href="https://picsum.photos/id/1/1000/800" />
  </defs>
  <use xlink:href="#img" class="vr-images1" clip-path="url(#clip-1)"/>
  <use xlink:href="#img" class="vr-images2" clip-path="url(#clip-2)"/>
  <use xlink:href="#img" class="vr-images3" clip-path="url(#clip-3)"/>
  <use xlink:href="#img" class="vr-images4" clip-path="url(#clip-4)"/>
  <use xlink:href="#img" class="vr-images5" clip-path="url(#clip-5)"/>
</svg>
<div class="box"></div>
<div class='big'>
  <img src="https://i.ibb.co/rxX8VMq/left.png" class='default'>
</div>

您也可以通过稍微修改文档的结构来仅使用 CSS 来完成此操作:

您需要将每个多边形叠加层分离为它们自己的 元素，以便当它们作为 .big 容器的 sibling 悬停时，您可以定位它们。

.container {
  position: relative;
}
.background {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}
.overlay {
  position: absolute;
  pointer-events: none;
  top: 0;
  right: 0;
}

.overlay use {
  opacity: 0;
  transition: all 0.4s linear;
  pointer-events: all;
}

.overlay use:hover {
  opacity: 1;
}

.vr-head-tilt {
  position: relative;
}

.big img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.vr-images1:hover ~ .big img:nth-of-type(1) {
  opacity: 1;
}
.vr-images2:hover ~ .big img:nth-of-type(2) {
  opacity: 1;
}
.vr-images3:hover ~ .big img:nth-of-type(3) {
  opacity: 1;
}
.vr-images4:hover ~ .big img:nth-of-type(4) {
  opacity: 1;
}
.vr-images5:hover ~ .big img:nth-of-type(5) {
  opacity: 1;
}

svg[class*="vr-images"]:not(.vr-images1):hover ~ .big img.default {
  opacity: 0;
}

.big {
  position: relative;
  background: white;
}
.big .default {
  opacity: 1;
}
.big img, .big .white-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, 7%);
  transition: .2s .1s ease-out;
  background-size: cover;
  pointer-events: none;
}
.big .white-bg {
  background: white;
  width: 200px;
  height: 200px;
  opacity: 1;
}
.container:not(:hover) .vr-images1{ opacity:1; }
<svg width="0" height="0" style="position:aboslute;pointer-events:none">
  <defs>
    <clipPath id='clip-1'>
    <polygon points="0,100 100,100 0,50"/>
    </clipPath>
    <clipPath id='clip-2'>
    <polygon points="0,50 100,100 50,00 0,0"/>
    </clipPath>
    <clipPath id='clip-3'>
    <polygon points="100,100 50,00 150,0"/>
    </clipPath>
    <clipPath id='clip-4'>
    <polygon points="100,100 200,50 200,0 150,0"/>
    </clipPath>
    <clipPath id='clip-5'>
    <polygon points="100,100 200,100, 200,50"/>
    </clipPath>
    <image id="img" x="0" y="0" width="200" height="100" preserveAspectRatio="xMidYMid slice"
    xlink:href="https://picsum.photos/id/1/1000/800" />
  </defs>
<div class="container">
  <svg class="background" viewBox="0 0 200 100"></svg>

  <svg class="overlay vr-images1" viewBox="0 0 200 100">
    <use xlink:href="#img" class="vr-images1" clip-path="url(#clip-1)"/>
  </svg>
  <svg class="overlay vr-images2" viewBox="0 0 200 100">
    <use xlink:href="#img" class="vr-images2" clip-path="url(#clip-2)"/>
  </svg>
  <svg class="overlay vr-images3" viewBox="0 0 200 100">
    <use xlink:href="#img" clip-path="url(#clip-3)"/>
  </svg>
  <svg class="overlay vr-images4" viewBox="0 0 200 100">
    <use xlink:href="#img" clip-path="url(#clip-4)"/>
  </svg>
  <svg class="overlay vr-images5" viewBox="0 0 200 100">
    <use xlink:href="#img" clip-path="url(#clip-5)"/>
  </svg>
  <div class="box"></div>
  <div class='big'>
   <div class="white-bg"></div>
   <img src="https://i.ibb.co/rxX8VMq/left.png" class='default'>
   <img src="https://i.ibb.co/r77CrCC/topleft.png">
   <img src="https://i.ibb.co/CzRdRtp/top.png">
   <img src="https://i.ibb.co/L8cSs3p/topright.png">
   <img src="https://i.ibb.co/D1cjqfD/right.png">
  </div>
</div>

关于javascript - 如何使用 SVG 更改鼠标悬停时的图像源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56625236/

上一篇：html - 当 iframe 高度可变时嵌入 iframe

下一篇：html - Thymeleaf:在此上下文中只允许返回数字或 bool 值的变量表达式

相关文章：

html - 解析页面是什么意思？

html - 我的 CSS 代码有什么问题？

javascript - 即 8 : JS call to new Image() fails when the code is run in a popup window

javascript - 如何使该脚本中的引文成为可点击链接？

javascript - 如何自定义或编辑 OpenLayers.js？

javascript - 有什么办法可以用当前的 IE9 beta CSS 做文本阴影吗？

javascript - 通过 ajax 更改 css 属性不起作用？

php - Laravel 不会链接样式表

css - 如何在 Firebug 上隐藏划线的 CSS 行？

javascript - 选择接下来的 2 位以 XXX 开头但不是 XXX 的数字

©2024 IT工具网  联系我们