svg文本上的颜色属性不起作用[重复]答案

【问题标题】：Color attribute on svg text not working [duplicate]svg文本上的颜色属性不起作用[重复]
【发布时间】：2019-01-31 22:56:49
【问题描述】：

你好……我想做的是把这个 svg 文本变成白色，我以前用这种方法做过，但现在不能让它工作，但其他属性可以正常工作……有什么想法吗？

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;
}

【问题讨论】：

你试过用fill代替color吗？

标签： html css svg text colors

【解决方案1】：

使用 SVG 标签时，请使用 fill 而不是 color。这适用于任何路径、形状或文本。

将您的 CSS 替换为：

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

或者你的内联 HTML 代码：

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

请参阅Mozilla documentation of SVG text 了解更多信息。

【讨论】：