SVG Path Fill 属性无法正常工作答案

【问题标题】：SVG Path Fill property not working as it shouldSVG Path Fill 属性无法正常工作
【发布时间】：2019-06-03 00:24:50
【问题描述】：

请看一下这段代码，让我知道我哪里出错了，填充属性似乎不起作用？这应该模仿汽车转向信号。

我已经检查过了，这似乎是对 fill 属性的正确使用，但它没有按预期工作。此外，我尝试了一个非常简单的路径，例如三角形，这很有效 - 那么如果路径 = 路径，这个形状有什么独特之处？

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>

【问题讨论】：

标签： svg path fill

【解决方案1】：

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

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

所以现在已经解决了。

谢谢。

【讨论】：