我正尝试在火车轨道周围附加 15 个点,如图所示,但不确定如何/如果可能的话将这些点转换为适合圆形轨道:
当鼠标悬停在每个点上时,应该会出现站点标题。
对于这种情况,SVG 会是更好的解决方案吗?如果是这样,它是否支持悬停每个点?
https://codepen.io/anon/pen/bjodLR
<ul class='track-container'>
<li><span class="station-name">Station 1</span></li>
<li><span class="station-name">Station 2</span></li>
<li><span class="station-name">Station 3</span></li>
<li><span class="station-name">Station 4</span></li>
<li><span class="station-name">Station 5</span></li>
<li><span class="station-name">Station 6</span></li>
<li><span class="station-name">Station 7</span></li>
<li><span class="station-name">Station 8</span></li>
<li><span class="station-name">Station 9</span></li>
<li><span class="station-name">Station 10</span></li>
<li><span class="station-name">Station 11</span></li>
<li><span class="station-name">Station 12</span></li>
<li><span class="station-name">Station 13</span></li>
<li><span class="station-name">Station 14</span></li>
<li><span class="station-name">Station 15</span></li>
</ul>
@import "compass/css3";
@mixin on-track($item-count, $circle-size, $item-size) {
position: relative;
width: $circle-size * 2;
height: $circle-size;
border-radius: 25%/50%;
list-style: none;
> li {
background: #fff;
border: 2px solid #555556;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -($item-size / 2);
width: $item-size;
height: $item-size;
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($circle-size / 2)
rotate($rot * -1deg);
}
$rot: $rot + $angle;
}
.station-name {
display: none;
position: absolute;
left: -45px;
bottom: 25px;
width: 100px;
text-align: center;
font-weight: bold;
}
&:hover {
cursor: pointer;
.station-name {
display: block;
}
}
}
}
.track-container {
@include on-track($item-count: 15, $circle-size: 20em, $item-size: 1em);
margin: 15em auto 0;
border: 30px solid #555556;
box-shadow: 0 0 0 30px #f60;
}
最佳答案
我采用了 SVG 方法。我使用 Adobe Illustrator 将上面的图像转换为 SVG,并为站名添加了 SVG 文本 anchor 。
关于html - 在圆 Angular 矩形周围附加点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51573084/