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包裹在锚标记中。

<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>

Answer 2

您可以将它们包装在<a>标记

中

＆＃13;

<div class="hexagons">
  <a href="#"><svg id="hex1"><use xlink:href="#hexagon"/></svg></a>

</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>

＆＃13;

HTML中的Hexagon链接

2 个答案: