带有“非缩放笔画”的 svg 忽略视图框并使用其视口答案

【问题标题】：svg with "non-scaling-stroke" ignores viewbox and uses its viewport带有“非缩放笔画”的 svg 忽略视图框并使用其视口
【发布时间】：2016-10-16 08:42:16
【问题描述】：

我正在使用一个 SVG，我不希望 <circle> 的笔划在调整大小时缩放。当我将vector-effect="non-scaling-stroke" 添加到<circle> 时会发生什么，现在圆周基于viewport 而不是原来的viewBox。这是一个问题，因为在动画中使用stroke-dasharray 时，它引用了错误的圆周。

下面的 sn-p 显示了一个 stroke-dasharray 设置为两个相同大小的圆的周长和显示问题的右圆（使用视口；有效地将其周长加倍）：

svg {
  width: 400px;
  height: auto;
  fill: none;
  stroke: #000;
  stroke-width: 6;
  stroke-dasharray: 252
}

<body>

  <svg viewBox="0 0 200 100">

    <circle cx="50" cy="50" r="40" />

    <circle cx="150" cy="50" r="40" vector-effect="non-scaling-stroke" />

  </svg>

</body>

有什么方法可以告诉<circle> 尊重 viewBox 而不是 viewport？

【问题讨论】：

标签： svg

【解决方案1】：

当您指定非缩放笔画时会发生这种情况：它“不缩放”笔画中的“破折号”以及笔画本身。如果您有一个普通的笔划破折号数组（而不是将其用作动画 hack） - 这是您想要的行为 :) 目前没有办法为破折号数组计算指定不同的坐标系，所以 javascript 是你的朋友。

【讨论】：

我不同意您的说法，即这将是理想的行为。当您指定非缩放笔画时，它是影响笔画的宽度，笔画的长度仍在缩放。由于 stroke-dasharray 引用了笔画的长度，我希望它尊重缩放。就我而言，所描述的行为是一个错误。
在 SVG2 中提交错误和/或请求规范说明 - 它仍然是 WIP。