Calc() 不能在 Safari 和 Firefox 中使用 stroke-dashoffset

Posted 2023-03-06

【中文标题】Calc() 不能在 Safari 和 Firefox 中使用 stroke-dashoffset

【英文标题】：Calc() not working with stroke-dashoffset in Safari and Firefox

【发布时间】：2021-04-27 03:36:08

【问题描述】：

尝试在 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"  >
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
<svg class="withoutCalc" viewBox="0 0 200 200"  >
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>

这是 Safari 和 Firefox 的错误吗？ Caniuse shows that both should fully support calc()。在这种情况下，有没有其他方法可以有效地使用calc()？

【问题讨论】：

它看起来确实像一个错误——因为 FF 至少似乎要求指定单位。例如 calc(50% / 2) 和 calc(190px / 2) 都可以接受，但 calc(190 / 2) 给出无效的属性值。只要 calc 有一个单位，CSS 变量也可以接受。我尝试了乘法，因为 [link]developer.mozilla.org/en-US/docs/Web/CSS/calc() 说“至少有一个参数必须是数字”，所以听起来很有希望，但仍然没有用。

@AHaworth 我不认为这是 resolution here 古怪的属性解析（即无单位解析）的 FF 错误不适用于计算。

@RobertLongson 谢谢 - 有趣的是，我被 MDN 关于乘法的声明误导了，这听起来像是 2 无单位就可以了。

【参考方案1】：

如果你想在 CSS 中使用 calc，你需要使用单位，this resolution

幸运的是 calc with units 可以在 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"  >
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>
<svg class="withoutCalc" viewBox="0 0 200 200"  >
  <line x1="5" y1="100" x2="195" y2="100" stroke="black"/>
</svg>

【讨论】：

你是对的！在询问之前，我在更复杂的实际代码中对此进行了测试，但并没有什么不同。但它绝对解决了这个最小示例中的问题。在我的真实代码中，CSS 位于内联 SVG 的 <style> 标记内。我想知道这是否会改变事情。当这种情况下包含单位时，Safari 的开发工具会发出警告。如果我可以在一个最小的示例中复制，我将尝试隔离并发布另一个问题。