有条件地更改 SVG 多边形上的填充颜色

Question

我有一个包含大约 60 个不同多边形的 SVG，我需要根据传入的温度值更改颜色，但 Html.Raw 没有在编译时插入我需要的文本。

这是我在视图中看到的内容。

<svg id="_mapa" class="dragger" xmlns="http://www.w3.org/2000/svg">
            <polygon class="polyArea" 
                     onclick="window.location.href='@Url.Action("Red","Home")'"
                     name="13" points="1345,955  1345,1080 1875,1080 1875,1015 1935,1015 1935,955" 
                     stroke="black" stroke-width="5"


                     @if ((int)ViewBag.Thirteen >= 100) { Html.Raw("fill='#E74C3C'"); } //red
                     else if ((int)ViewBag.Thirteen > 80 && (int)ViewBag.Thirteen < 100) { Html.Raw("fill='#F4D03F'"); } //yellow
                     else { Html.Raw("fill='#2ECC71'"); }


                     opacity="0.5" style="cursor: pointer;">
                     <title>Cuiseur a Vapeur&#10;Current Temperature: @ViewBag.Thirteen &deg;F</title>
                     </polygon>
</svg>

但这就是它在实际页面上返回的内容。

<svg id="_mapa" class="dragger" xmlns="http://www.w3.org/2000/svg">
       <polygon class="polyArea" name="13" 
            onclick="window.location.href='/Home/Red'"
            points="1345,955  1345,1080 1875,1080 1875,1015 1935,1015 1935,955" stroke="black" 
            stroke-width="5" opacity="0.5" style="cursor: pointer;">
            <title>Cuiseur a Vapeur
            Current Temperature: 135 °F</title></polygon>
</svg>

如您所见，填充属性根本没有插入，这可能吗？

Answer 1

脑袋在办公桌上磕了一会儿，想通了：

<svg id="_mapa" class="dragger" xmlns="http://www.w3.org/2000/svg">
            <polygon class="polyArea" 
                     onclick="window.location.href='@Url.Action("Red","Home")'"
                     name="13" points="1345,955  1345,1080 1875,1080 1875,1015 1935,1015 1935,955" 
                     stroke="black" stroke-width="5"


                     @if ((int)ViewBag.Thirteen >= 100) { @Html.Raw("fill='#E74C3C'"); } //red
                     else if ((int)ViewBag.Thirteen > 80 && (int)ViewBag.Thirteen < 100) { @Html.Raw("fill='#F4D03F'"); } //yellow
                     else { @Html.Raw("fill='#2ECC71'"); }


                     opacity="0.5" style="cursor: pointer;">
                     <title>Cuiseur a Vapeur&#10;Current Temperature: @ViewBag.Thirteen &deg;F</title>
                     </polygon>
</svg>

我在 if 语句中 Html.Raw 之前遗漏了“@”。

有条件地更改 SVG 多边形上的填充颜色

Conditionally change fill colour on SVG Polygon

html

asp.net-mvc

razor