时间戳

首页 > 解决方案 > 在中风中无法获得真正的白色，真正的黑色

svg - 在中风中无法获得真正的白色，真正的黑色

问题描述

我正在尝试使用 svg 实现“行军蚂蚁”风格的动画选择框。为边框的虚线图案设置动画效果似乎很好，但由于某种原因，我无法获得真正的黑色/真正的白色颜色。

（使用 ff 68.0.2 64 位，以防万一）

<svg height="110" width="200">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> <!-- for sample overlay -->
  <g fill="none" stroke="#000000" stroke-width="1">
    <path id="solid" stroke-dasharray="" d="M5 40 l215 0" />
  </g>
  <g fill="none" stroke="#ffffff" stroke-width="1">
    <path  stroke-dasharray="4,8,4,0" d="M5 40 l215 0" />
  </g>
  <rect x="1" y="1" width="100" height="100" style="fill:rgba(0,0,0,0);stroke-width:1;stroke:rgb(0,0,0)"/>
  <rect x="1" y="1" id="ants" width="100" height="100" stroke-dasharray="4,8,4,0"  style="fill:rgba(0,0,0,0);stroke-width:1;stroke:#ffffff"/>
  Sorry, your browser does not support inline SVG.
</svg>

提琴手

标签： svg

解决方案

在摆弄了更多之后，我发现当增加笔画宽度时，颜色会更接近预期。

事实证明，抗锯齿是愚蠢的。如果我打开 shape-rendering="crispEdges" 那么颜色会按预期工作。

不幸的是，它也留下了锯齿，这当然是抗锯齿存在的原因。

如果这是“解决方案”，我想我会接受它，但如果有人知道如何使抗锯齿清理线条边缘而不会使颜色变得如此糟糕，那将是理想的。

更新：我将继续接受这一点。一旦动画，它并不是那么糟糕。

    @keyframes marchingAnts {
        0% { stroke-dashoffset: 0 }
        100% { stroke-dashoffset: 50 }
    }
    .ants, .antsBackground {
        stroke-width: 1;
        fill: none;
        shape-rendering: crispEdges;
    }
    .ants {
        stroke: #ffffff;
        animation: marchingAnts 2400ms linear infinite;
        stroke-dasharray: 5,5,0,0;
    }
    .antsBackground {
        stroke: #000000;
    }

这是带有 css 动画的 JsFiddle，作为比较，还有来自 OP 评论的 2 像素宽度解决方案。

推荐阅读