尝试在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表明，两者都应全力支持calc()。calc()在这种情况下还有另一种有效使用方式吗？
根据此分辨率，如果要在CSS中使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句