How to create a clickable circle of svg images-CodePudding

I've got a few svg files that all fit together like a puzzle and together form a circle. What is the best way to position them? I've tried Creating an ul and put the segments in it, all on top of eachother. Since the segment svgs are already rotated correctly I thought I could just put display flex on the wrapper, and put a gap between them, but gap does not seem to work.

My code now:

<div >
    <ul >
        <li>
            <img  src="img/infographic/techniek.svg">
        </li>
        <li>
            <img  src="img/infographic/aard-warmte-projecten.svg">
        </li>
        <li>
            <img  src="img/infographic/duurzame-energiezaken.svg">
        </li>
        <li>
            <img  src="img/infographic/modellering.svg">
        </li>
        <li>
            <img  src="img/infographic/ruimtelijke-ontwikkeling.svg">
        </li>
        <li>
            <img  src="img/infographic/corporate-finance.svg">
        </li>
        <li>
            <img  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;
        }
    }
}

What is the best way to approach this?

JSfiddle:

CodePudding user response：

The most straightforward way of achieving this is by centring all the images in the middle and then use transform to place them where you need.

So starting with:

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

And increasing the rotate and translate per image

Since the actual position does not seems to be aligned in your example, I'd just spaced them evenly:

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

CodePudding user response：

Why not using an SVG as a wrapper? You can use the <image> to embed the images and <a> to link to somewhere.

At this point (with all the small SVG images already made) the only problem is to put them back together in the right size and position. Maybe you could go one step back in the process and have a look at the source files and see if the sizing/positioning can be solved there.

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