如何将颜色应用于 SVG 文本元素

问题描述 投票：0回答：4

好吧...我快要疯了。我已经开始尝试 SVG。使用 SVG 并对其应用 CSS 类就像一个魅力。我只是不知道我做错了什么，但我只是无法让类在 svg 文本元素上工作。我把它全部剥下来，这就是我得到的：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            color: yellow;
        }
    </style>
    <h2>SVG - Sandbox</h2>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
            <text x="65" y="40" class="caption">Fact</text>
        </svg>
    </div>
</body>
</html>

根据http://www.w3.org/TR/SVG/styling.html#ClassAttribute这应该有效...

关于要更改的内容或替代方案有任何提示/技巧吗？

html css text svg
4个回答
167
投票

设置类是正确的，但 CSS 颜色属性对 SVG 没有影响。 SVG 使用 fill 和 lines 属性。在你的情况下，你可能只需要改变颜色来填充。这会在 Firefox 中显示黄色文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            fill: yellow;
        }
    </style>
    <h2>SVG - Sandbox</h2>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
            <text x="65" y="40" class="caption">Fact</text>
        </svg>
    </div>
</body>
</html>

7
投票

这是 Google 为 SVG 文本着色的最佳结果，让像我这样的新手非常清楚，在 2022 年为 SVG 文本元素着色，使用描边和填充。

fill="red"
stroke="#0000FF"

就像使用描边作为形状的轮廓颜色并使用填充作为形状的内部颜色一样，您可以对 SVG 中的文本执行相同的操作。

最好的消息是，如果您使用 

fill="currentColor"
而不是硬编码颜色，您可以使用 CSS 设置 SVG 文本。

svg {
    color: red;
}

单击运行代码片段即可查看此答案中的示例。

<svg height="202" width="202">
      <circle cx="101" cy="101" r="100"
              stroke="red"
              stroke-width="1"
              fill="none"
              />

<!-- fill="currentColor" if you want to use CSS to set the color of SVG text -->
      <text x="100" y="100" 
            text-anchor="middle"
            fill="red"
            stroke="#0000FF"
            stroke-width="1px"
            alignment-baseline="middle"
            font-variant="all-small-caps"
            font-size="25"
            font-weight="bold" 
            >
        Font is Colored
      </text>

1
投票

接受的答案也不适合我，所以我做了更多研究，并找到了解决方案。 如果将 SVG 

<text .../>
元素包装在 
<g .../>
（组）元素中，它就可以工作：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
  <g class="caption">
    <text x="65" y="40" fill="currentcolor">Fact</text>
  </g>
</svg>

这会将 CSS 应用于 

<g>
，然后 
<text>
元素将父级的 
currentcolor
继承到其 
fill
（或 
stroke
）中。

0
投票

我只是将填充放在 SVG 的文本元素中

<svg style="fill: ${color};" version="1.0" xmlns="http://www.w3.org/2000/svg"
                                        width="48" height="48" viewBox="0 0 1280.000000 1280.000000"
                                        preserveAspectRatio="xMidYMid meet">
                                        <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
                                            stroke="none">
                                            <path d="M3684 12777 c29 -118 741 -2470 911 -3012 166 -528 325 -978 394
                                                -1113 l20 -40 -67 -40 c-123 -73 -168 -161 -204 -396 -24 -165 -41 -222 -80
                                                -281 -42 -63 -104 -107 -293 -210 -169 -92 -325 -187 -440 -269 -1271 -908
                                                -1841 -2501 -1435 -4007 272 -1004 956 -1857 1880 -2342 390 -205 806 -336
                                                1275 -403 177 -25 633 -30 835 -9 858 87 1630 446 2239 1039 633 618 1012
                                                1405 1107 2299 20 189 14 660 -10 832 -77 540 -243 1020 -502 1450 -372 616
                                                -861 1073 -1526 1425 -292 155 -332 205 -372 465 -38 243 -81 340 -178 401
                                                -30 19 -38 30 -33 42 60 142 169 496 279 910 146 545 826 3241 826 3272 0 7
                                                -290 10 -902 10 l-903 0 -82 -328 c-236 -938 -333 -1319 -340 -1334 -7 -14
                                                -252 794 -489 1610 l-16 52 -950 0 -950 0 6 -23z m1474 -4452 l32 -45 638 0
                                                c351 0 768 3 926 7 287 6 288 6 310 30 22 23 22 24 40 4 40 -44 24 -176 -28
                                                -239 -45 -53 -147 -65 -307 -37 -471 81 -904 80 -1383 -6 -191 -34 -270 -23
                                                -318 42 -49 65 -63 165 -32 217 14 24 70 72 84 72 4 0 20 -20 38 -45z" />
                                            <text id="letra_medalha" x="6100" y="-4000" font-family="Arial"
                                                font-size="4000" fill="${getContrastColor(color)}"
                                                text-anchor="middle" alignment-baseline="middle"
                                                dominant-baseline="middle" transform="rotate(180) scale(-1, 1)">
                                                ${post.medalha_titles[index]}
                                            </text>
                                        </g>
                                    </svg>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.