Conditionally change fill colour on SVG Polygon-CodePudding

I have an SVG with about 60 different polygons that I need to change colour based on the temperature value that's being passed in, yet Html.Raw isn't inserting the text I need it to when it compiles.

Here's what I have in the view.

<svg id="_mapa"  xmlns="http://www.w3.org/2000/svg">
            <polygon  
                     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>

But this is what it's returning on the actual page.

<svg id="_mapa"  xmlns="http://www.w3.org/2000/svg">
       <polygon  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>

As you can see, the fill property isn't getting inserted at all, is this even possible?

CodePudding user response：

After banging my head on my desk for a while, I figured it out:

<svg id="_mapa"  xmlns="http://www.w3.org/2000/svg">
            <polygon  
                     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>

I was missing the '@' before the Html.Raw inside the if statements.