如何创建一个可点击的 svg 图像圈
How to create a clickable circle of svg images
我有几个 svg 文件，它们像拼图一样拼在一起，形成一个圆圈。放置它们的最佳方法是什么？我试过创建一个 ul 并将片段放入其中，全部放在彼此之上。由于段 svgs 已经正确旋转，我想我可以把 display flex 放在包装纸上，并在它们之间留一个间隙，但间隙似乎不起作用。
我现在的代码：
<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：https://jsfiddle.net/fyL4r0vu/
期望的结果：
实现此目的最直接的方法是将所有图像居中，然后使用 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>
为什么不使用 SVG 作为包装器？您可以使用 <image> 来嵌入图像，并使用 <a> 到 link 到某个地方。
在这一点上（所有小的 SVG 图像都已经制作完成）唯一的问题是将它们以正确的大小和位置重新组合在一起。也许你可以在这个过程中退后一步，看看源文件，看看 sizing/positioning 是否可以在那里解决。
<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>
您也可以将所有内容构建成一张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>
我有几个 svg 文件，它们像拼图一样拼在一起，形成一个圆圈。放置它们的最佳方法是什么？我试过创建一个 ul 并将片段放入其中，全部放在彼此之上。由于段 svgs 已经正确旋转，我想我可以把 display flex 放在包装纸上，并在它们之间留一个间隙，但间隙似乎不起作用。
我现在的代码：
<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：https://jsfiddle.net/fyL4r0vu/
期望的结果：
实现此目的最直接的方法是将所有图像居中，然后使用 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>
为什么不使用 SVG 作为包装器？您可以使用 <image> 来嵌入图像，并使用 <a> 到 link 到某个地方。
在这一点上（所有小的 SVG 图像都已经制作完成）唯一的问题是将它们以正确的大小和位置重新组合在一起。也许你可以在这个过程中退后一步，看看源文件，看看 sizing/positioning 是否可以在那里解决。
<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>
您也可以将所有内容构建成一张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>