SVG路径填充属性无法正常工作

Question

请看一下这段代码，让我知道我要去哪里了，fill属性似乎无法正常工作？这应该是模仿汽车转向信号。

我已经检查过，看来这是对fill属性的正确使用，但未按预期工作。我还尝试了一个非常简单的路径（例如三角形），并且此方法可行-如果path = path，那么这种形状有何独特之处？

function trafficLighttoggle() {
    var pth = document.getElementById("pth");

    if (pth.classList == "traffic") {
        pth.classList = "white";
    } else {
        pth.classList = "traffic";
    }
}

setInterval(trafficLighttoggle, 500);

.traffic {
    stroke: #ffbf00;
    stroke-width: 1px;
    fill: #ffbf00;
    fill-opacity: 1;
}

.white {
    stroke: white;
    stroke-width: 1px;
    fill: white;
    fill-opacity: 1;
}

<svg overflow="visible">
    <path id="pth" class="traffic" d="M160,90 L210,50 M210,50 V70 M210,70 H290 M290,70 V120 M290,120 H210 M210,120 V140 M210,140 L160,90 Z"/>
</svg>

Answer 1

我发现我的代码有什么问题，我的路径生成器不正确，应该是

<path id="pth" class="traffic" d="M160,90 L210,50 V70 H290 V120 H210 V140 Z"/>

因此，现在已解决。

谢谢。