Color attribute on svg text not working

user_10274486 0
Viewed 5433

Hello… What I'm trying to do is to make this svg text white, which I've done before this way but can't get it to work now, but the other attributes work correctly… any ideas?

Html:

<svg width="1100px" height="100px">

                        <polygon points="0 0, 125 0, 125 30, 50 60, 125 60, 125 100, 0 100" style="fill:#0091ea"/>
                        <polygon points="135 0, 775 0, 775 10, 725 100, 135 100 " style="fill: #64dd17"/>
                        <polygon points="785 0, 1100 0, 1050 100, 735 100, 785 10" style="fill: #0091ea"/>
                        <text id="txteva" x="150" y="40"> Evaluación de unidad 1</text>
                        <text id="txteva2" x="150" y="75">Estudios Sociales y Cívica 1</text>

 </svg>

CSS: 

#txteva  {
color: #ffffff;
 font-size: 30px;
font-weight: bolder;
}

#txteva2 {
color: #ffffff;
font-weight: bold;
}
svg colors css text html
1 Answers

When using SVG tags use fill instead of color. This goes for any path, shape, or text.

Replace your CSS with:

#txteva {
  fill: #fff;
  font-size: 30px;
  font-weight: bold;
}

Or your inline HTML code with:

<text id="txteva" x="150" y="40" fill="#fff">Evaluación de unidad 1</text>

See Mozilla documentation of SVG text for more.

user_55662170
Related