Question

在safari的小提琴上你会发现它没有底部边框。如果您访问Chrome的小提琴，您将看到底部边框。悬停效果适用于两种浏览器，但我正在尝试诊断边框底部无法在Safari上运行的原因。

谢谢！

HTML：

 <body>
    <div class="name">
        <div class="svg-wrapper">
          <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape" height="60" width="320" />
            <div class="text">STEVE</div>
          </svg>
        </div>
    </div>

CSS：

body {
  background: #303030;
  min-height: 100%;
  text-align: center;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.name {
    position: relative;
    top: 60px;
    cursor: default;
}

.svg-wrapper {
  position: relative;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 320px;  
}

.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #9a5cb4;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  left: 0px;
  position: relative;
}

.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

Answer 1

下划线和动画笔触效果与CSS边框属性无关。

效果全部通过SVG stroke-dasharray，stroke-dashoffset和stroke-width属性上的CSS动画完成。我甚至不确定为什么边界底部在那里。在Safari（5.1.7）中，笔划对我有效，但它不像Chrome那样平滑动画。它只是从一个状态跳到另一个状态（粗细下划线到细框）。

可能是因为Safari 5不支持这些SVG属性上的CSS动画。您应该能够通过普通的SVG（SMIL）动画或使用javascript来修改这些属性来实现相同的效果。

我不确定你为什么在你的Safari版本中没有看到任何中风。你用的是哪个版本？

为什么这个SVG形状在Chrome上的工作方式与Safari不同？

1 个答案: