在 fiddle with safari 上，您会注意到它没有底部边框。如果您使用 Chrome 访问 fiddle，您会看到底部边框。悬停效果适用于两种浏览器，但我正在尝试诊断为什么底部边框在 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;
}
最佳答案
下划线和动画描边效果与 CSS border 属性无关。
效果全部通过 SVG stroke-dasharray、stroke-dashoffset 和 stroke-width 属性上的 CSS 动画完成。我什至不确定为什么 border-bottom 在那里。笔触在 Safari (5.1.7) 中对我有用，但它的动画效果不如 Chrome 流畅。它只是从一种状态跳到另一种状态(粗下划线到细框)。
可能是因为 Safari 5 不支持这些 SVG 属性上的 CSS 动画。您应该能够通过普通 SVG (SMIL) 动画或使用 javascript 修改这些属性来实现相同的效果。
我不确定为什么您在您的 Safari 版本中看不到任何笔画。您使用的是什么版本？
关于html - 为什么此 SVG 形状在 Chrome 上的工作方式与 Safari 不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22123284/