缩小 SVG 时颜色会褪色

Question

我一直在使用纯 Javascript、HTML、CSS 编写一些数学可视化。我正在研究斐波那契二元分形（参见工作示例）。为了能够看到不断增长的图像，我计算了所绘制线条的边界，然后调整图像。

图像是使用 SVG 元素中的

<Polyline>

绘制的，使用黑色描边和 1 像素的描边宽度。直到迭代 15 为止，图像在 1500x900 像素的 SVG 元素上非常正常。见下图

增加迭代次数时，线条不适合，脚本将设置

viewBox

以便图像适合。这意味着图像被缩小。然而，颜色也在褪色。见下图：

有人有解决方案吗？或者这是 SVG 中缩小的属性吗？

另一种解决方案是使用较短的线长度重新计算整个图像，但这将需要一些认真的重构......

Answer 1

根据评论中的好提示，我尝试了以下操作：

使用CSS“矢量效果：非缩放描边;”帮了很多忙。这还有一个额外的好处，即第一次迭代没有可笑的粗线！太棒了！

svg polyline {
  stroke:black;
  fill: none;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect:non-scaling-stroke;
}

经过 20 次迭代，得到以下结果：

尝试让线条笔划宽度取决于迭代会产生略有不同的结果；：

线条是当然的，但这可以通过修改迭代和线宽之间的关系来修复。