Hexagon-Links in HTML

Ich bin ein Neuling im Front-End. Ich habe 6 Sechsecke auf meiner Seite erstellt. Ich habe diesen Code online gefunden. Ich möchte jedes Sechseck in eine Verbindung verwandeln. Wie kann ich das machen? Ich weiß, es ist wahrscheinlich ziemlich einfach.Hexagon-Links in 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> 

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

Quelle

2017-06-13 Gino DeFalco

Haben Sie versucht, sie in einem '' Tag Verpackung? – Swellar

Sie können '' Elemente innerhalb eines '

Fügen Sie '' before each hexagon, and '' nach jedem hinzu. Es ist praktisch eine Grundvoraussetzung für Web-Entwicklung, daher empfehle ich, die Grundlagen auf [** W3Schools **] (https://www.w3schools.com/html/) zu überprüfen. –

Wrap jeder svg in einem Anker-Tag.

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

Quelle

2017-06-13 03:05:16

Super! Vielen Dank!!! Das hat funktioniert! –

Sie können sie wickeln in einem <a> Tag

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

Quelle

2017-06-13 03:06:21 Swellar

Hexagon-Links in HTML

Antwort

Verwandte Themen