SVG 文件未用作 CSS 遮罩

Question

我想使用 SVG 文件作为某些图像的蒙版。然而，它并没有被使用，而是隐藏了整个图像。我单独包含它来检查路径是否错误，但作为图像它加载得很好。我还在不同的浏览器中检查了它，带引号和不带引号，并在 SVG 中添加了一些标题，但什么也没有。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #testDiv
            {
                display: inline-block;
                -webkit-mask:url("1.svg");
            }
        </style>
    </head>
    <body>
        <div id="testDiv">
            <img id="test" src="1.png" style="height: 250px; width: 1500px; object-fit: cover;">
        </div>
        <img src="1.svg">
    </body>
</html>

SVG：

<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="1500px">
    <text x="0" y="180" font-family="Cambria, sans-serif" font-size="250">
        Text masking
    </text>
</svg>

输出（顶部是空的，但它应该显示一个遮罩图像。）：

我做错了什么？谢谢你。

我还应该说这工作得很好（我剪切并格式化了它以使其更清晰，但在代码中它是一个没有换行符的单行字符串。）：

-webkit-mask:url('data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="1500px">
    <text id="mask" x="0" y="180" font-family="Cambria, sans-serif" font-size="250">
    Test masking
    </text>
</svg>');

Answer 1

这里有几种可能性：

对
```
1.svg
```
的请求会导致某种 4xx 状态（例如 404），因为服务器无法满足该请求
此文件在提供时的 MIME 类型不正确。如果不是
```
image/svg+xml
```
，那么浏览器将不知道如何处理它。

您的下一步是查看开发者控制台中的请求，看看发生了什么。

SVG 文件未用作 CSS 遮罩

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

1个回答

最新问题

SVG 文件未用作 CSS 遮罩

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

1个回答

最新问题

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