将 SVG 渐变滤镜应用于背景图像

Question

我找到了这个 SVG 代码，我想知道如何将它应用到背景图像上？

<svg width="600px" height="600px" viewbox="0 0 600 600">
    <defs>
        <linearGradient id="alphaLinear">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="100%" />
        </linearGradient>

        <mask id="Mask">
            <rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)"  />
        </mask>
    </defs>

    <image xlink:href="/media/images/body-bg.jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet" mask="url(#Mask)"/>
</svg>

在<image> 标签中，我将href url 替换为我想要使用的图像。然后我像这样从css调用svg：

body{
     background: url('/media/images/gradient.svg') center top no-repeat;
}

似乎什么都没有发生，我得到的只是白色背景。

Answer 1

有几点不对：

1. 对于外部文件，您需要在 <svg> 标记中声明 xmlns 和 xmlns:xlink 命名空间。

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        width="600px" height="600px" viewbox="0 0 600 600">
   

2. viewbox 应该是viewBox

3. 用作<img> 中的外部图像或background-image 的SVG 文件需要是自包含的。它们不能像您在此处那样引用其他外部文件。

   如果需要，您可以将外部 JPEG 嵌入为数据 URI。

   <image xlink:href="data:image/jpeg;base64,...Base64 encoded JPEG data here...">