时间戳

首页 > 解决方案 > 在圆角矩形周围附加点

html - 在圆角矩形周围附加点

问题描述

如图所示，我正在尝试在火车轨道周围附加 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;
}

标签： htmlcsssvg

解决方案

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

推荐阅读