Html 为什么这个SVG形状在Chrome上的工作方式与Safari不同？
在摆弄safari时，你会注意到它没有底部边框。如果您使用Chrome访问小提琴，您将看到底部边框。悬停效果在两种浏览器上都可以使用，但我正在尝试诊断为什么边框底部在Safari上不起作用 谢谢 HTML:Html 为什么这个SVG形状在Chrome上的工作方式与Safari不同？,html,css,svg,Html,Css,Svg,在摆弄safari时，你会注意到它没有底部边框。如果您使用Chrome访问小提琴，您将看到底部边框。悬停效果在两种浏览器上都可以使用，但我正在尝试诊断为什么边框底部在Safari上不起作用 谢谢 HTML: 下划线和动画笔划效果与CSS边框属性无关 效果都是通过SVG stroke dasharray、stroke dashoffset和stroke width属性上的CSS动画实现的。我甚至不知道为什么会有边界底部。在Safari 5.1.7中，笔划确实适用于我，但它的动画效果不如Chrome
下划线和动画笔划效果与CSS边框属性无关 效果都是通过SVG stroke dasharray、stroke dashoffset和stroke width属性上的CSS动画实现的。我甚至不知道为什么会有边界底部。在Safari 5.1.7中，笔划确实适用于我，但它的动画效果不如Chrome流畅。它只是从一种状态跳到另一种状态，从粗下划线跳到细框 可能是因为Safari5不支持SVG属性上的CSS动画。您应该能够通过普通SVG SMIL动画或使用javascript修改这些属性来实现相同的效果
我不知道为什么你在你的Safari版本中没有看到任何中风。您使用的是什么版本？在Safari上，它似乎不想使用边框底部：5px纯黑；在镀铬中，它继承了笔画的颜色。。我不明白，你在开玩笑吧？你自己去找小提琴吧。我的问题就在代码之前，我有点开玩笑。我本来只看标题，所以我认为这是一个不同的渲染。我现在可以看出这个问题是针对border-bottom的。事实上，我收回了它，我不是在开玩笑。您试图显示什么？我可以看到，边框在应用于.shape时不会显示，但是如果将其应用于Chrome中的svg元素，它看起来是否与Safari中的一样？Safari 7.0.2版您是否有其他想法来完成我想做的事情？
<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>
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;
}