Question

如图所示，我正在尝试在火车轨道上附加15个点，但是不确定如何/尽可能将点转换为适合圆形轨道：

将鼠标悬停在每个点上时，将显示电台标题。

在这种情况下，SVG是否会是更好的解决方案？如果是这样，它是否可以为每个点提供悬停支持？

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

Answer 1

我采用了SVG方法。我使用Adobe Illustrator将上面的图像转换为SVG，并为站点名称添加了SVG文本锚。

在圆角矩形上附加点

1 个答案: