javascript - HTML 中的六边形链接

Question

我是前端新手。我在页面上创建了 6 个六边形。我在网上找到了这段代码。我想把每个六边形变成一个链接。我怎样才能做到这一点？我知道这可能很容易。

<div class="hexagons">
    <svg id="hex1"><use xlink:href="#hexagon"/></svg>
    <svg id="hex2"><use xlink:href="#hexagon"/></svg>
    <svg id="hex3"><use xlink:href="#hexagon"/></svg>
    <svg id="hex4"><use xlink:href="#hexagon"/></svg>
    <svg id="hex5"><use xlink:href="#hexagon"/></svg>
    <svg id="hex6"><use xlink:href="#hexagon"/></svg>

</div>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
        <symbol id="hexagon" viewbox="0,0,300,300">
            <polygon points="150 0 280 75 280 225 150 300 20 225 20 75"></polygon>
        </symbol>
    </svg>

<!-- =============================================================================== -->

Answer 1

将每个 svg 包裹在 anchor 标记中。

<div class="hexagons">
  <a href="#link1"><svg id="hex1"><use xlink:href="#hexagon"/></svg></a>
  <a href="#link2"><svg id="hex2"><use xlink:href="#hexagon"/></svg></a>
  <a href="#link3"><svg id="hex3"><use xlink:href="#hexagon"/></svg></a>
  <a href="#link4"><svg id="hex4"><use xlink:href="#hexagon"/></svg></a>
  <a href="#link5"><svg id="hex5"><use xlink:href="#hexagon"/></svg></a>
  <a href="#link6"><svg id="hex6"><use xlink:href="#hexagon"/></svg></a>
</div>