HTML中的六角形鏈接

我是前端的新手。我在我的頁面上創建了6個六邊形。我在網上找到了這個代碼。我想把每個六邊形變成一個鏈接。我怎樣才能做到這一點？我知道這可能很容易。HTML中的六角形鏈接

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

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

來源

2017-06-13 Gino DeFalco

您是否嘗試過在''包裝標籤呢？ – Swellar

您可以在'

在每個後面加上'' before each hexagon, and ''。它實際上是Web開發的基礎，所以我建議在[** W3Schools **]（https://www.w3schools.com/html/）上查看基礎知識。 –

包裝每個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>

來源

2017-06-13 03:05:16

太棒了！謝謝！！！這工作！ –

你可以用它們在<a>標籤

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

來源

2017-06-13 03:06:21 Swellar

HTML中的六角形鏈接

回答

相關問題