I want to use text tags inside svg as links but wrapping them inside an a tag seems to make them unable to render. here is the html
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="819"
height="673" viewBox="0,0,819,673" >
<g fill="none" fill-rule="nonzero" stroke="#000100" stroke-width="none" stroke-linecap="round" stroke-linejoin="miter"
stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none"
font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M409.5,319.17949l50,17.32051" fill="none" stroke-width="2"></path>
<path d="M459.5,336.5l-77.79645,67.3737" fill="none" stroke-width="2"></path>
<path d="M459.5,336.5l-77.79645,67.3737" fill="none" stroke-width="2"></path>
<path d="M381.70355,403.8737l-25.11858,-130.51996" fill="none" stroke-width="2"></path>
<path d="M381.70355,403.8737l-25.11858,-130.51996" fill="none" stroke-width="2"></path>
<path d="M356.58497,273.35373l153.94023,53.32646" fill="none" stroke-width="2"></path>
<path d="M356.58497,273.35373l153.94023,53.32646" fill="none" stroke-width="2"></path>
<path d="M510.5252,326.68019l-145.83005,126.29253" fill="none" stroke-width="2"></path>
<path d="M510.5252,326.68019l-145.83005,126.29253" fill="none" stroke-width="2"></path>
<path d="M364.69515,452.97272l-42.12698,-218.89821" fill="none" stroke-width="2"></path>
<path d="M364.69515,452.97272l-42.12698,-218.89821" fill="none" stroke-width="2"></path>
<path d="M322.56817,234.07451l238.98224,82.78588" fill="none" stroke-width="2"></path>
<a href="writings" target="_blank">
<text x="-402.27378" y="272.51973" transform="rotate(-100.89339)" fill="#000100"
stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24"
text-anchor="middle">WRITINGS</text>
</a>
<path d="M322.56817,234.07451l238.98224,82.78588" fill="none" stroke-width="2"></path>
<path d="M561.55041,316.86039l-213.86366,185.21136" fill="none" stroke-width="2"></path>
<a href="projects" target="_blank">
<text x="507.87466" y="115.59441" transform="rotate(19.10661)" fill="#000100"
stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24"
text-anchor="middle">PROJECTS</text>
</a>
<path d="M561.55041,316.86039l-213.86366,185.21136" fill="none" stroke-width="2"></path>
<path d="M347.68675,502.07175l-59.13538,-307.27646" fill="none" stroke-width="2"></path>
<path d="M347.68675,502.07175l-59.13538,-307.27646" fill="none" stroke-width="2"></path>
<path d="M288.55137,194.79529l324.02424,112.24529" fill="none" stroke-width="2"></path>
<path d="M288.55137,194.79529l324.02424,112.24529" fill="none" stroke-width="2"></path>
<path d="M612.57561,307.04058l-281.89726,244.13019" fill="none" stroke-width="2"></path>
<path d="M612.57561,307.04058l-281.89726,244.13019" fill="none" stroke-width="2"></path>
<path d="M330.67835,551.17078l-76.14378,-395.6547" fill="none" stroke-width="2"></path>
<a href="github" target="_blank"><text x="-75.60088" y="-633.12574" transform="rotate(139.10661)" fill="#000100"
stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24"
text-anchor="middle">GITHUB</text></a>
<path d="M330.67835,551.17078l-76.14378,-395.6547" fill="none" stroke-width="2"></path>
<path d="M254.53457,155.51607l409.06625,141.70471" fill="none" stroke-width="2"></path>
<path d="M254.53457,155.51607l409.06625,141.70471" fill="none" stroke-width="2"></path>
<path d="M663.60082,297.22078l-349.93087,303.04902" fill="none" stroke-width="2"></path>
<path d="M663.60082,297.22078l-349.93087,303.04902" fill="none" stroke-width="2"></path>
<path d="M313.66995,600.2698l-93.15218,-484.03295" fill="none" stroke-width="2"></path>
<path d="M313.66995,600.2698l-93.15218,-484.03295" fill="none" stroke-width="2"></path>
<path d="M220.51776,116.23685l494.10826,171.16412" fill="none" stroke-width="2"></path>
<path d="M220.51776,116.23685l494.10826,171.16412" fill="none" stroke-width="2"></path>
<path d="M714.62602,287.40097l-417.96447,361.96785" fill="none" stroke-width="2"></path>
<path d="M714.62602,287.40097l-417.96447,361.96785" fill="none" stroke-width="2"></path>
<path d="M296.66155,649.36883l-110.16059,-572.41119" fill="none" stroke-width="2"></path>
<path d="M296.66155,649.36883l-110.16059,-572.41119" fill="none" stroke-width="2"></path>
<path d="M186.50096,76.95763l579.15026,200.62354" fill="none" stroke-width="2"></path>
<path d="M186.50096,76.95763l579.15026,200.62354" fill="none" stroke-width="2"></path>
<path d="M765.65122,277.58117l-485.99808,420.88668" fill="none" stroke-width="2"></path>
<path d="M765.65122,277.58117l-485.99808,420.88668" fill="none" stroke-width="2"></path>
<path d="M279.65314,698.46785l-127.16899,-660.78944" fill="none" stroke-width="2"></path>
</g>
</svg>CodePudding user response：
Like one of the comments say, you should add the attribute viewBox to <svg>:
<svg viewBox="150 30 620 670">
<g fill="none" fill-rule="nonzero" stroke="#000100" stroke-width="none" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M409.5,319.17949l50,17.32051" fill="none" stroke-width="2"></path>
<path d="M459.5,336.5l-77.79645,67.3737" fill="none" stroke-width="2"></path>
<path d="M459.5,336.5l-77.79645,67.3737" fill="none" stroke-width="2"></path>
<path d="M381.70355,403.8737l-25.11858,-130.51996" fill="none" stroke-width="2"></path>
<path d="M381.70355,403.8737l-25.11858,-130.51996" fill="none" stroke-width="2"></path>
<path d="M356.58497,273.35373l153.94023,53.32646" fill="none" stroke-width="2"></path>
<path d="M356.58497,273.35373l153.94023,53.32646" fill="none" stroke-width="2"></path>
<path d="M510.5252,326.68019l-145.83005,126.29253" fill="none" stroke-width="2"></path>
<path d="M510.5252,326.68019l-145.83005,126.29253" fill="none" stroke-width="2"></path>
<path d="M364.69515,452.97272l-42.12698,-218.89821" fill="none" stroke-width="2"></path>
<path d="M364.69515,452.97272l-42.12698,-218.89821" fill="none" stroke-width="2"></path>
<path d="M322.56817,234.07451l238.98224,82.78588" fill="none" stroke-width="2"></path>
<a href="WRITINGS" target="_blank">
<text x="-402.27378" y="272.51973" transform="rotate(-100.89339)" fill="#000100" stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24" text-anchor="middle">
<tspan>WRITINGS</tspan></text></a>
<path d="M322.56817,234.07451l238.98224,82.78588" fill="none" stroke-width="2"></path>
<path d="M561.55041,316.86039l-213.86366,185.21136" fill="none" stroke-width="2"></path>
<a href="PROJECTS" target="_blank">
<text x="507.87466" y="115.59441" transform="rotate(19.10661)" fill="#000100" stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24" text-anchor="middle">
<tspan>PROJECTS</tspan></text></a>
<path d="M561.55041,316.86039l-213.86366,185.21136" fill="none" stroke-width="2"></path>
<path d="M347.68675,502.07175l-59.13538,-307.27646" fill="none" stroke-width="2"></path>
<path d="M347.68675,502.07175l-59.13538,-307.27646" fill="none" stroke-width="2"></path>
<path d="M288.55137,194.79529l324.02424,112.24529" fill="none" stroke-width="2"></path>
<path d="M288.55137,194.79529l324.02424,112.24529" fill="none" stroke-width="2"></path>
<path d="M612.57561,307.04058l-281.89726,244.13019" fill="none" stroke-width="2"></path>
<path d="M612.57561,307.04058l-281.89726,244.13019" fill="none" stroke-width="2"></path>
<path d="M330.67835,551.17078l-76.14378,-395.6547" fill="none" stroke-width="2"></path>
<a href="GITHUB" target="_blank">
<text x="-75.60088" y="-633.12574" transform="rotate(139.10661)" fill="#000100" stroke-width="0.1" font-family="sans-serif" font-weight="normal" font-size="24" text-anchor="middle">
<tspan>GITHUB</tspan></text></a>
<path d="M330.67835,551.17078l-76.14378,-395.6547" fill="none" stroke-width="2"></path>
<path d="M254.53457,155.51607l409.06625,141.70471" fill="none" stroke-width="2"></path>
<path d="M254.53457,155.51607l409.06625,141.70471" fill="none" stroke-width="2"></path>
<path d="M663.60082,297.22078l-349.93087,303.04902" fill="none" stroke-width="2"></path>
<path d="M663.60082,297.22078l-349.93087,303.04902" fill="none" stroke-width="2"></path>
<path d="M313.66995,600.2698l-93.15218,-484.03295" fill="none" stroke-width="2"></path>
<path d="M313.66995,600.2698l-93.15218,-484.03295" fill="none" stroke-width="2"></path>
<path d="M220.51776,116.23685l494.10826,171.16412" fill="none" stroke-width="2"></path>
<path d="M220.51776,116.23685l494.10826,171.16412" fill="none" stroke-width="2"></path>
<path d="M714.62602,287.40097l-417.96447,361.96785" fill="none" stroke-width="2"></path>
<path d="M714.62602,287.40097l-417.96447,361.96785" fill="none" stroke-width="2"></path>
<path d="M296.66155,649.36883l-110.16059,-572.41119" fill="none" stroke-width="2"></path>
<path d="M296.66155,649.36883l-110.16059,-572.41119" fill="none" stroke-width="2"></path>
<path d="M186.50096,76.95763l579.15026,200.62354" fill="none" stroke-width="2"></path>
<path d="M186.50096,76.95763l579.15026,200.62354" fill="none" stroke-width="2"></path>
<path d="M765.65122,277.58117l-485.99808,420.88668" fill="none" stroke-width="2"></path>
<path d="M765.65122,277.58117l-485.99808,420.88668" fill="none" stroke-width="2"></path>
<path d="M279.65314,698.46785l-127.16899,-660.78944" fill="none" stroke-width="2"></path>
</g>
</svg>I also made an alternate solution of the entire SVG. Here I just use <line> and <g> to make the triangle. I think it must be easier to control -- like how mush it should rotate etc.
<svg viewBox="0 0 220 220" width="400">
<g fill="#000100" fill-rule="nonzero" stroke="#000100" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" font-size="10" font-family="sans-serif" font-variant="small-caps" text-anchor="middle" >
<g transform="translate(100 100) rotate(20)">
<line x1="0" y1="0" x2="10" y2="0"/>
<g transform="translate(10 0) rotate(120)">
<line x1="0" y1="0" x2="20" y2="0"/>
<g transform="translate(20 0) rotate(120)">
<line x1="0" y1="0" x2="30" y2="0"/>
<g transform="translate(30 0) rotate(120)">
<line x1="0" y1="0" x2="40" y2="0"/>
<g transform="translate(40 0) rotate(120)">
<line x1="0" y1="0" x2="50" y2="0"/>
<g transform="translate(50 0) rotate(120)">
<a href="WRITINGS" target="_blank">
<text transform="translate(30 0)" stroke="none">Writings</text>
</a>
<line x1="0" y1="0" x2="60" y2="0"/>
<g transform="translate(60 0) rotate(120)">
<a href="PROJECTS" target="_blank">
<text transform="translate(35 0)" stroke="none">Projects</text>
</a>
<line x1="0" y1="0" x2="70" y2="0"/>
<g transform="translate(70 0) rotate(120)">
<line x1="0" y1="0" x2="80" y2="0"/>
<g transform="translate(80 0) rotate(120)">
<line x1="0" y1="0" x2="90" y2="0"/>
<g transform="translate(90 0) rotate(120)">
<line x1="0" y1="0" x2="100" y2="0"/>
<g transform="translate(100 0) rotate(120)">
<a href="GITHUB" target="_blank">
<text transform="translate(55 0)" stroke="none">Github</text>
</a>
<line x1="0" y1="0" x2="110" y2="0"/>
<g transform="translate(110 0) rotate(120)">
<line x1="0" y1="0" x2="120" y2="0"/>
<g transform="translate(120 0) rotate(120)">
<line x1="0" y1="0" x2="130" y2="0"/>
<g transform="translate(130 0) rotate(120)">
<line x1="0" y1="0" x2="140" y2="0"/>
<g transform="translate(140 0) rotate(120)">
<line x1="0" y1="0" x2="150" y2="0"/>
<g transform="translate(150 0) rotate(120)">
<line x1="0" y1="0" x2="160" y2="0"/>
<g transform="translate(160 0) rotate(120)">
<line x1="0" y1="0" x2="170" y2="0"/>
<g transform="translate(170 0) rotate(120)">
<line x1="0" y1="0" x2="180" y2="0"/>
<g transform="translate(180 0) rotate(120)">
<line x1="0" y1="0" x2="190" y2="0"/>
<g transform="translate(190 0) rotate(120)">
<line x1="0" y1="0" x2="200" y2="0"/>
<g transform="translate(200 0) rotate(120)">
<line x1="0" y1="0" x2="210" y2="0"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>CodePudding user response：
<svg viewBox="0 0 220 220" width="400">
<g fill="#000100" fill-rule="nonzero" stroke="#000100" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" font-size="10" font-family="sans-serif" font-variant="small-caps" text-anchor="middle" >
<g transform="translate(100 100) rotate(20)">
<line x1="0" y1="0" x2="10" y2="0"/>
<g transform="translate(10 0) rotate(120)">
<line x1="0" y1="0" x2="20" y2="0"/>
<g transform="translate(20 0) rotate(120)">
<line x1="0" y1="0" x2="30" y2="0"/>
<g transform="translate(30 0) rotate(120)">
<line x1="0" y1="0" x2="40" y2="0"/>
<g transform="translate(40 0) rotate(120)">
<line x1="0" y1="0" x2="50" y2="0"/>
<g transform="translate(50 0) rotate(120)">
<a href="WRITINGS" target="_blank">
<text transform="translate(30 0)" stroke="none">Writings</text>
</a>
<line x1="0" y1="0" x2="60" y2="0"/>
<g transform="translate(60 0) rotate(120)">
<a href="PROJECTS" target="_blank">
<text transform="translate(35 0)" stroke="none">Projects</text>
</a>
<line x1="0" y1="0" x2="70" y2="0"/>
<g transform="translate(70 0) rotate(120)">
<line x1="0" y1="0" x2="80" y2="0"/>
<g transform="translate(80 0) rotate(120)">
<line x1="0" y1="0" x2="90" y2="0"/>
<g transform="translate(90 0) rotate(120)">
<line x1="0" y1="0" x2="100" y2="0"/>
<g transform="translate(100 0) rotate(120)">
<a href="GITHUB" target="_blank">
<text transform="translate(55 0)" stroke="none">Github</text>
</a>
<line x1="0" y1="0" x2="110" y2="0"/>
<g transform="translate(110 0) rotate(120)">
<line x1="0" y1="0" x2="120" y2="0"/>
<g transform="translate(120 0) rotate(120)">
<line x1="0" y1="0" x2="130" y2="0"/>
<g transform="translate(130 0) rotate(120)">
<line x1="0" y1="0" x2="140" y2="0"/>
<g transform="translate(140 0) rotate(120)">
<line x1="0" y1="0" x2="150" y2="0"/>
<g transform="translate(150 0) rotate(120)">
<line x1="0" y1="0" x2="160" y2="0"/>
<g transform="translate(160 0) rotate(120)">
<line x1="0" y1="0" x2="170" y2="0"/>
<g transform="translate(170 0) rotate(120)">
<line x1="0" y1="0" x2="180" y2="0"/>
<g transform="translate(180 0) rotate(120)">
<line x1="0" y1="0" x2="190" y2="0"/>
<g transform="translate(190 0) rotate(120)">
<line x1="0" y1="0" x2="200" y2="0"/>
<g transform="translate(200 0) rotate(120)">
<line x1="0" y1="0" x2="210" y2="0"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>