Question

我正试图掩盖一个svg图标来改变它的颜色。每个图标都可以有不同的颜色，所以我想只加载一次并更改客户端的颜色。这适用于除Microsoft Edge之外的所有浏览器。我创建了一个html示例来重现问题：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <svg version="1.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <mask id="icon">
                    <image xlink:href="./icon.svg" width="100%" height="100%" />
                </mask >
            </defs>
            <rect fill="red" mask="url(#icon)" width="100%" height="100%" />
        </svg>
    </body>
</html>

svg看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>office_building icon</title>
    <path id="curve2" fill="#ffffff" d="M6080,8000 7360,8000 7360,9600 6080,9600z"/>
    <path id="curve1" fill="#ffffff" d="M4160 5120l5120 0c176,0 320,144 320,320l0 4160 -1920 0 0 -1920 -1920 0 0 1920 -1920 0 0 -4160c0,-176 144,-320 320,-320zm320 2560l0 1280 640 0 0 -1280 -640 0zm2 -1928l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm-2 1928l0 1280 640 0 0 -1280 -640 0z"/>
    <path id="curve0" fill="#ffffff" d="M960 640l5120 0c176,0 320,144 320,320l0 3840 -2240 0c-353,0 -640,287 -640,640l0 4160 -2880 0 0 -8640c0,-176 144,-320 320,-320zm320 4480l0 1280 640 0 0 -1280 -640 0zm3840 -1920l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm3840 -1920l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm1280 5760l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm1280 -1920l0 1280 640 0 0 -1280 -640 0z"/>
</svg>

如果在Edge中打开此示例，则不显示任何内容。在所有其他浏览器中，图标正确显示为红色。

在我的项目中，svg是通过服务加载的，但这不是问题，你可以在我的例子中看到。此外，它必须通过服务加载，因为图标可以在以后更改。切换到png，这将是有效的，目前不是一种选择。

有没有办法让Edge在svg中运行，或者目前是不可能的？

Answer 1

Edge目前不支持MDN documentation的svg掩码。

Microsoft Edge不会呈现屏蔽的svg

1 个答案: