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

有一些问题：

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

<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">

viewbox应为viewBox
在<img>或background-image中用作外部图像的SVG文件需要自包含。他们不能像你在这里那样引用其他外部文件。

如果需要，您可以将外部JPEG嵌入为数据URI。
```
<image xlink:href="data:image/jpeg;base64,...Base64 encoded JPEG data here..."> 
```

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

1 个答案: