主页 / 问题 / 789552
Accepted
kizoso
Asked:2020-02-24 17:26:11 +0000 UTC2020-02-24 17:26:11 +0000 UTC

从 svg 链接到文档

  • 772

按颜色排列的元素必须成组。当悬停在一种颜色上时，所有其他相同的颜色都会做出反应。单击组中的任何元素时，您需要点击指向 svg 外部 id 的链接。如何在 svg 之外建立外部链接？

.section {
  min-height: 100vh;
  width: 800px;
  margin: 0 auto;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}
<section class="section">
  <svg width="800" height="400">
    <g href="#red" fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4">
      <polygon points="498,96 553,70 571,116 514,139"/>
      <polygon points="158,328 203,310 223,369 176,383"/>
    </g>

    <g href="#green" fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4">
      <polygon points="242,295 286,277 302,316 259,339"/>
      <polygon points="425,228 472,215 500,260 441,277"/>
    </g>

    <g href="#blue" fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4">
      <polygon points="138,246 170,229 185,270 154,287"/>
      <polygon points="250,170 305,160 324,210 270,222"/>
    </g>
  </svg>
</section>
<section id="red" class="section">
  <h1>Красный</h1>
</section>
<section id="green" class="section">
  <h1>Зеленый</h1>
</section>
<section id="blue" class="section">
  <h1>Синий</h1>
</section>

html

2 个回答

  1. Best Answer

    更改polygon为rect使用transform="rotate()"，添加<a></a>到SVG，使工作title

    .section {
  min-height: 100vh;
  width: 800px;
  margin: 0 auto;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}
    <section class="section">
  <svg width="800" height="400">
<a href="#red">
    <g fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4">
    <title>RED</title>
      <rect x="155" y="320" width="50" height="65" transform="rotate(-15 155 320)"/>
      <rect x="555" y="75" width="45" height="60" transform="rotate(70 555 75)"/>
    </g>
</a>
<a href="#green">
<title>GREEN</title>
    <g fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4">
      <rect x="242" y="245" width="45" height="50" transform="rotate(70 242 295)"/>
      <rect x="425" y="170" width="50" height="60" transform="rotate(70 425 228)"/>
    </g>
</a>
<a href="#blue">
<title>BLUE</title>
    <g fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4">
      <rect x="140" y="246" width="30" height="50" transform="rotate(-20 140 246)"/>
      <rect x="255" y="170" width="50" height="55" transform="rotate(-18 255 170)"/>
    </g>
    </a>
  </svg>
</section>
<section id="red" class="section">
  <h1>Красный</h1>
</section>
<section id="green" class="section">
  <h1>Зеленый</h1>
</section>
<section id="blue" class="section">
  <h1>Синий</h1>
</section>

    • 4

  2. 原来链接可以直接放在svg里面：

    .section {
  min-height: 100vh;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}
    <section class="section">
  <svg width="800" height="400">
    <a href="#red" title="красный">
      <g fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4">
        <polygon points="498,96 553,70 571,116 514,139"/>
        <polygon points="158,328 203,310 223,369 176,383"/>
      </g>
    </a>

    <a href="#green" title="зеленый">
      <g fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4">
        <polygon points="242,295 286,277 302,316 259,339"/>
        <polygon points="425,228 472,215 500,260 441,277"/>
      </g>
    </a>

    <a href="#blue" title="синий">
      <g fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4">
        <polygon points="138,246 170,229 185,270 154,287"/>
        <polygon points="250,170 305,160 324,210 270,222"/>
      </g>
    </a>
  </svg>
</section>
<section id="red" class="section">
  <h1>Красный</h1>
</section>
<section id="green" class="section">
  <h1>Зеленый</h1>
</section>
<section id="blue" class="section">
  <h1>Синий</h1>
</section>

    事实title是行不通的，但在这种情况下，它并不那么重要。

    • 3

相关问题