如何超链接转换后的 SVG

Question

我有一个 SVG，其中包含四个转换后的四分之一圆。我想让这些四分之一圆中的每一个都可以点击，并且能够将用户带到不同的 link。我该如何实现？

代码：

      <svg width="400" height="400">
        <path id="quartertl" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
          style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
        <path id="quartertr" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
        style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
        <path id="quarterbr" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
        style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
        <path id="quarterbl" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
        style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>

        <use transform="translate(195,195) scale(0.7,0.7)" xlink:href="#quartertl"></use>
        <use transform="translate(200,195) rotate(90) scale(0.7,0.7)" xlink:href="#quartertl"></use>
        <use transform="translate(200,200) rotate(180) scale(0.7,0.7)" xlink:href="#quartertl"></use>
        <use transform="translate(195,200) rotate(270) scale(0.7,0.7)" xlink:href="#quartertl"></use>
      </svg>

Answer 1

下面是一个展示如何使用 SVG <a> 元素的示例。

<svg width="400" height="400">
  <path id="quartertl" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path id="quartertr" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path id="quarterbr" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path id="quarterbl" d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>

  <a xlink:href="https://www.whosebug.com">
    <use transform="translate(195,195) scale(0.7,0.7)" xlink:href="#quartertl"></use>
  </a>
  <use transform="translate(200,195) rotate(90) scale(0.7,0.7)" xlink:href="#quartertl"></use>
  <use transform="translate(200,200) rotate(180) scale(0.7,0.7)" xlink:href="#quartertl"></use>
  <use transform="translate(195,200) rotate(270) scale(0.7,0.7)" xlink:href="#quartertl"></use>
</svg>

如何超链接转换后的 SVG

How do you hyperlink a transformed SVG

html

svg

hyperlink