How do I write the html to create a sitemap using SVG like the image given?
diagram svg
This is what I have so far
<svg width="400" height="200">
<rect x="0" y="0" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" onclick=""/>
<text x="50" y="60" text-anchor="middle">MY PAGE</text>
<line x1="50" y1="100" x2="50" y2="130" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />
<line x1="50" y1="130" x2="25" y2="150" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />
<line x1="50" y1="130" x2="75" y2="150" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />
<rect x="0" y="100" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" onclick=""/>
<text x="50" y="160" text-anchor="middle">ABOUT ME</text>
<rect x="100" y="100" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" onclick=""/>
<text x="150" y="160" text-anchor="middle">CONTACT ME</text>
<rect x="200" y="100" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" onclick=""/>
<text x="250" y="160" text-anchor="middle">MY PORTFOLIO</text>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" />
</marker>
</defs>
</svg>
2
Answers
Creating this from code alone would be challenging. If you have a vector program that enables export to .svg, the easiest way to do this is to create the illustration then export the HTML as an .svg file. You can use CSS to alter the color .svg to preference. Here is an example of what the syntax would look like.
https://jsfiddle.net/jasonbruce/twp94jbq/
Instead of laying out the entire thing in SVG you could combine HTML with SVG as background images. So, elements can be styled with a before and after pseudo element what has an SVG as background.
If there should be more levels this probably needs to be refactured a bit.