时间戳

首页 > 解决方案 > 使用 SVG 编码将鼠标悬停在 PNG 图像上时如何获得不同的颜色/填充/不透明度

html - 使用 SVG 编码将鼠标悬停在 PNG 图像上时如何获得不同的颜色/填充/不透明度

问题描述

我有点生疏，十年左右没有在 HTML 方面做太多事情。我买了一个模板用于我的摄影网站，它符合我的喜好。但是，我正在制作一个单独的部分来解决我对美国的印象。在过去使用 AREA MAP 选择特定状态时，我遇到了一个问题，即当图像调整大小时，可点击部分也出现了问题。我设法让它与 SVG 一起工作，这对我来说是新的。到目前为止，一切都很好。为了使它更好，我想在有人悬停在某个状态上时更改颜色/不透明度/填充。它会喜欢这样，所以当悬停在我没有关闭图像的状态上时不会发生任何事情，但是当它确实包含图像时会发生。为了简单起见，我制作了这个测试页面：https ://www.states.nl/TEST4.html表明我的意思。当前仅添加了“蒙大拿”。当然，我首先查看了互联网，但我认为可行的一切都没有。有人知道如何让这个为我工作吗？提前致谢！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
<title>Untitled Document</title><br>
</head>

<body>

<script>#backing {
    vertical-align: middle;
    margin: 0;
    overflow: hidden;
}
#backing svg { 
    display: inline-block;
    position: absolute;
    top: 0; left: 0;
}
          </script>
        <figure id='backing'>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet" >
            <image width="1200" height="800" xlink:href="http://www.states.nl/img/locations/usa_map.png"></image>
            <a xlink:href="/MT_relief.html" target="_parent">
                <polygon id="Montana" points="238,38,253,41,259,41,259,42,265,42,265,43,272,43,303,48,311,48,353,54,363,54,363,55,372,55,372,56,382,56,382,57,392,57,392,58,401,58,401,59,411,59,411,60,421,60,421,61,433,61,433,62,448,62,448,63,475,64,465,180,427,179,416,179,392,178,392,177,356,175,356,174,346,174,346,173,336,173,336,172,306,169,305,170,303,181,301,179,299,179,297,176,288,177,288,176,286,176,286,175,275,176,275,175,273,175,273,174,271,174,271,173,263,167,261,158,260,158,260,156,257,154,257,152,255,151,254,146,253,146,253,144,252,144,251,141,244,140,243,132,243,128,244,128,246,124,248,124,249,115,242,111,241,106,240,106,240,104,239,104,238,95,234,92,234,90,233,90,234,81,232,80,234,64" fill="#fff" opacity="0"/><title>Montana</title>
            </a>
          </svg>
        </figure>
</body>
</html>`

标签： htmlsvg

解决方案

The PNG has nothing to do with the solution, it is a background image.

You have to make the :hover over the Montana polygon work:

<style>
  svg {
    height: 300px;
    background:grey;
  }
</style>
<svg viewBox="0 0 1200 800">
  <style>
    polygon {
      pointer-events: all;
      cursor: pointer;
    }
    polygon:hover {
      fill: hotpink;
    }
  </style>
  <image href="//www.states.nl/img/locations/usa_map.png"></image>
  <a href="/MT_relief.html" target="_parent">
    <polygon id="Montana" points="238,38,253,41,259,41,259,42,265,42,265,43,272,43,303,48,311,48,353,54,363,54,363,55,372,55,372,56,382,56,382,57,392,57,392,58,401,58,401,59,411,59,411,60,421,60,421,61,433,61,433,62,448,62,448,63,475,64,465,180,427,179,416,179,392,178,392,177,356,175,356,174,346,174,346,173,336,173,336,172,306,169,305,170,303,181,301,179,299,179,297,176,288,177,288,176,286,176,286,175,275,176,275,175,273,175,273,174,271,174,271,173,263,167,261,158,260,158,260,156,257,154,257,152,255,151,254,146,253,146,253,144,252,144,251,141,244,140,243,132,243,128,244,128,246,124,248,124,249,115,242,111,241,106,240,106,240,104,239,104,238,95,234,92,234,90,233,90,234,81,232,80,234,64" fill="none"></polygon>
    <title>Montana</title>
  </a>
</svg>

And once you have the polygons for all States, you don't need the background image. Just set the fill color for every State.

Appeltje.. eitje..

推荐阅读