如何創建一個可點擊的svg影像圈

我有一些 svg 檔案，它們都像拼圖一樣組合在一起并形成一個圓圈。放置它們的最佳方式是什么？我已經嘗試創建一個ul并將片段放入其中，所有這些都在彼此之上。由于段 svgs 已經正確旋轉，我想我可以將 display flex 放在包裝器上，并在它們之間放置一個間隙，但 gap 似乎不起作用。

我現在的代碼：

<div class="expertises-wrap">
    <ul class="expertises">
        <li>
            <img class="slice" src="img/infographic/techniek.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/aard-warmte-projecten.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/duurzame-energiezaken.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/modellering.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/ruimtelijke-ontwikkeling.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/corporate-finance.svg">
        </li>
        <li>
            <img class="slice" src="img/infographic/makelaardij.svg">
        </li>
    </ul>
</div>

(S)CSS

.expertises {
    position: relative;
    width: 500px;
    height: 500px;
    list-style: none;
    display: flex;
    gap: 70px;
    justify-content: center;
    align-items: center;
    li {
        position:absolute;
        img{
            width: 250px;
            height: auto;
        }
    }
}

解決這個問題的最佳方法是什么？

JSfiddle：

uj5u.com熱心網友回復：

實作這一點的最直接方法是將所有影像居中，然后transform將它們放置在您需要的位置。

所以開始：

transform: rotate(0deg) translate(10em) rotate(0deg);

并增加每個影像的rotate和translate

由于您的示例中的實際位置似乎沒有對齊，我只是將它們均勻地隔開：

.image-holder {
  position: relative;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
}
.image-holder > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 6em;
  height: 6em;
}
.image-holder > img:nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.image-holder > img:nth-of-type(2) {
  transform: rotate(45deg) translate(10em) rotate(-45deg);
}
.image-holder > img:nth-of-type(3) {
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.image-holder > img:nth-of-type(4) {
  transform: rotate(135deg) translate(10em) rotate(-135deg);
}
.image-holder > img:nth-of-type(5) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.image-holder > img:nth-of-type(6) {
  transform: rotate(225deg) translate(10em) rotate(-225deg);
}
.image-holder > img:nth-of-type(7) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.image-holder > img:nth-of-type(8) {
  transform: rotate(315deg) translate(10em) rotate(-315deg);
}

<div class="image-holder">
  <img class='slice' src="https://placehold.jp/50x50.png?text=1" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=2" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=3" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=4" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=5" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=6" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=7" alt="">
  <img class='slice' src="https://placehold.jp/50x50.png?text=8" alt="">
</div>

uj5u.com熱心網友回復：

為什么不使用 SVG 作為包裝器？您可以使用<image>嵌入影像并<a>鏈接到某處。

此時（已經制作了所有小的 SVG 影像）唯一的問題是將它們重新組合到正確的大小和位置。也許你可以在這個程序中退后一步，看看源檔案，看看是否可以在那里解決尺寸/定位問題。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <a href="#1">
    <image href="https://svgur.com/i/gUR.svg" width="40" x="30"/>
  </a>
  <a href="#2">
    <image href="https://svgur.com/i/gUQ.svg" width="38" x="58" y="5" />
  </a>
  <a href="#3">
    <image href="https://svgur.com/i/gTa.svg" width="33" x="64" y="38" />
  </a>
<svg>

uj5u.com熱心網友回復：

您還可以構建一個包含所有內容的 SVG 影像。這需要一些時間，但這是一個開始：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1700 1700" font-size="40" font-family="sans-serif" font-weight="bold" text-anchor="middle" dominant-baseline="middle">
  <path id="p1" d="M -348.917 -763.913 q 14.3 -6.534 28.831 -12.534 q 22.177 -9.132 44.8 -16.984 A 842.35 842.35 0 0 1 50.923 -838.5 c 1.469 0.086 2.91 0.181 4.37 0.284 c 4.405 0.3 8.8 0.62 13.2 0.984 A 841.9 841.9 0 0 1 299.932 -784.6 c 2.061 0.793 4.12 1.585 6.19 2.4 c 4.175 1.61 8.315 3.293 12.446 4.993 q 15.309 6.24 30.333 13.118 l -91.961 190.994 a 22.714 22.714 0 0 0 5.246 26.632 a 22.349 22.349 0 0 0 5.349 3.6 c 5.911 2.846 13.752 2.6 20.985 -0.662 a 38.549 38.549 0 1 1 -21.492 44.635 c -1.957 -7.69 -6.657 -13.971 -12.568 -16.817 a 22.372 22.372 0 0 0 -6.148 -1.939 a 22.708 22.708 0 0 0 -24.081 12.49 L 119.907 -288.482 a 308.9 308.9 0 0 0 -113.857 -24.055 c -1.361 -0.034 -2.729 -0.048 -4.08 -0.055 l -2.658 -0.015 c -3.38 0.015 -6.77 0.093 -10.131 0.205 A 308.721 308.721 0 0 0 -119.907 -288.455 L -209.1 -473.642 a 7.645 7.645 0 0 1 6.411 -10.964 a 71.13 71.13 0 1 0 -23.886 -139.181 a 73.715 73.715 0 0 0 -10.414 4.065 a 70.73 70.73 0 0 0 -22.556 17.064 a 7.627 7.627 0 0 1 -12.577 -1.816 Z" />
  <a href="#1">
    <use href="#p1" transform="translate(850 850) rotate(0)" fill="#eeaa23"/>
    <text fill="white" x="850" y="850" transform="translate(0 -500)">Techniek</text>
  </a>
  <a href="#2">
    <g transform="translate(850 850) rotate(51.43)">
      <use href="#p1" fill="#c09a2d"/>
      <g fill="white" transform="translate(0 -500) rotate(-51.43)">
        <text>(Aard)Warmte-</text>
        <text transform="translate(20 50)">projecten</text>
      </g>
    </g>
  </a>
  <a href="#3">
    <g transform="translate(850 850) rotate(102.86)">
      <use href="#p1" fill="#75813d"/>
      <g fill="white" transform="translate(0 -500) rotate(-102.86)">
        <text>(Duurzame)</text>
        <text transform="translate(20 50)">Energiezaken</text>
      </g>
    </g>
  </a>
  <a href="#4">
    <g transform="translate(850 850) rotate(154.29)">
      <use href="#p1" fill="#eeaa23"/>
    </g>
  </a>
  <a href="#5">
    <g transform="translate(850 850) rotate(205.71)">
      <use href="#p1" fill="#eeaa23"/>
    </g>
  </a>
  <a href="#6">
   <g transform="translate(850 850) rotate(257.14)">
      <use href="#p1" fill="#eeaa23"/>
    </g>
  </a>
  <a href="#7">
    <g transform="translate(850 850) rotate(308.57)">
      <use href="#p1" fill="#eeaa23"/>
    </g>
  </a>
<svg>

標籤：html css svg 粗鲁的

上一篇：如何告訴Highcharts渲染器使視口更大？

下一篇：如何根據SVG代碼中的條件應用css類？