SVG多文本标签背景色无法独立显示问题咨询

问题说明 #

你编写了为图片添加带背景色文本标签的SVG代码，但实际所有文本都使用了第一个filter定义的红色背景，修改feMergeNode的id也无法解决问题。

问题根源 #

SVG文档中ID必须唯一，你给两个<filter>标签都设置了id="solid"，浏览器只会识别第一个定义的同名ID对应的filter，后续同名的filter会被忽略，因此所有文本都引用了第一个红色背景的filter。

解决方案 #

给每个filter设置唯一的ID，让对应的<text>标签引用各自的filter即可。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
            <image width="1024" height="1024" xlink:href="https://www.serebii.net/pokearth/paldea.jpg"></image>

            <a xlink:href="#test1">
                <filter x="0" y="0" width="1" height="1" id="solid-red">
                    <feFlood flood-color="red" result="bg1" />
                    <feMerge>
                        <feMergeNode in="bg1" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>

                <text filter="url(#solid-red)" x="110" y="180" font-size="50">Test 1</text>
            </a>

            <a xlink:href="#test2">
                <filter x="0" y="0" width="1" height="1" id="solid-yellow">
                    <feFlood flood-color="yellow" result="bg2" />
                    <feMerge>
                        <feMergeNode in="bg2" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>

                <text filter="url(#solid-yellow)" x="20" y="50" font-size="50">Test 2</text>
            </a>
        </svg>
    </body>
</html>

额外优化方案 #

如果不需要filter的特殊效果，也可以用更直观的方式实现文本背景：用<rect>绘制背景矩形，再叠加文本，性能也更好：

<a xlink:href="#test1">
    <!-- 矩形的y值需根据文本基线调整，确保文本居中显示 -->
    <rect x="110" y="130" width="180" height="60" fill="red"/>
    <text x="110" y="180" font-size="50" fill="black">Test 1</text>
</a>

内容的提问来源于stack exchange，提问作者Nexussim Lements