You need to use units if you want to use calc in CSS, per this resolution
Fortunately calc with units works on Chrome, Firefox and 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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…