具有不同背景颜色的HTML SVG文本

6yoyoihd 于 2023-04-04 发布在其他

关注(0)|答案(1)|浏览(132)

我有一个图像，我想用不同的背景颜色渲染多个标签：

<!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">
                    <feFlood flood-color="red" result="bg1" />
                    <feMerge>
                        <feMergeNode in="bg1" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>

                <text filter="url(#solid)" 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">
                    <feFlood flood-color="yellow" result="bg2" />
                    <feMerge>
                        <feMergeNode in="bg2" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>

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

然而，文本标签总是设置第一个过滤器的颜色（红色）。我如何才能分开，使每个标签都有自己的颜色？我已经尝试给不同的mergeNodes id，但它不工作。

Html

来源：https://stackoverflow.com/questions/75878350/html-svg-texts-with-different-background-colors

1条答案

按热度按时间

xxb16uws1#

您现在在过滤器中具有相同的id，但它必须是唯一的：

<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="solid1">
              <feFlood flood-color="red" result="bg1" />
              <feMerge>
                    <feMergeNode in="bg1" />
                    <feMergeNode in="SourceGraphic" />
              </feMerge>
         </filter>

         <text filter="url(#solid1)" 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="solid2">
              <feFlood flood-color="yellow" result="bg2" />
              <feMerge>
                    <feMergeNode in="bg2" />
                    <feMergeNode in="SourceGraphic" />
              </feMerge>
         </filter>

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

赞(0）回复(0）举报 2023-04-04

我来回答

具有不同背景颜色的HTML SVG文本

1条答案

相关问题

热门标签

最新问答