文本標簽未在鏈接標簽內呈現

我想在 svg 中使用文本標簽作為鏈接，但將它們包裝在a標簽中似乎使它們無法呈現。這是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" class="w-full">
  <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>

uj5u.com熱心網友回復：

就像其中一條評論所說，您應該將該屬性添加viewBox到<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>

我還做了整個SVG的替代解決方案。在這里，我只使用<line>和<g>來制作三角形。我認為它必須更容易控制——比如它應該旋轉多少等等。

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

uj5u.com熱心網友回復：

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

標籤：javascript html svg 11 岁

上一篇：如何修復TypeError：順序必須是str，而不是int

下一篇：在svg路徑更改后再次執行影片