如何解决Calc() 不适用于 Safari 和 Firefox 中的 stroke-dashoffset
在 Safari (v12+) 和 Firefox (v84+) 中尝试将 calc()
与 stroke-dashoffset
属性一起使用会导致浏览器将该值呈现为 0px
而不是预期值。 Chrome 的行为符合预期。
在下面的示例中,两个 SVG 看起来应该相同,线条的笔触延伸到正方形的一半。
svg {
border: 1px solid red;
}
.withCalc line,.withoutCalc line {
stroke-dasharray: 190;
}
.withCalc line {
stroke-dashoffset: calc(190 / 2);
}
.withoutCalc line {
stroke-dashoffset: 95;
}
<svg class="withCalc" viewBox="0 0 200 200" width="200" height="200">
<line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
<svg class="withoutCalc" viewBox="0 0 200 200" width="200" height="200">
<line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
这是 Safari 和 Firefox 的错误吗? Caniuse shows that both should fully support calc()
。在这种情况下,还有其他有效使用 calc()
的方法吗?
解决方法
如果你想在 CSS 中使用 calc,你需要使用单位,每 this resolution
幸运的是,带有单位的 calc 适用于 Chrome、Firefox 和 Safari。
svg {
border: 1px solid red;
}
.withCalc line,.withoutCalc line {
stroke-dasharray: 190px;
}
.withCalc line {
stroke-dashoffset: calc(190px / 2);
}
.withoutCalc line {
stroke-dashoffset: 95px;
}
<svg class="withCalc" viewBox="0 0 200 200" width="200" height="200">
<line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
<svg class="withoutCalc" viewBox="0 0 200 200" width="200" height="200">
<line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。