html - 带 mask 的全宽图像

Question

我有一个带有图像标题(全 Angular )的响应式网站。在该图像的顶部，我有一个 SVG 蒙版，我有这个，所以我在标题底部有一个类似绘画的外观。问题是，我的图像没有缩放以适应宽度。我希望它的宽度为 100%，高度为 700px(或者像 cover 它的父级一样，就像您通常所做的那样:background-size: cover)。

这就是我想要的:

这就是我到目前为止所取得的成就(图像不同，但这并不重要:

这就是我需要刷子的原因:

我正在使用的代码:

<div class="cover">
        <svg width="100%" height="100%" baseProfile="full" version="1.2">
            <defs>
                <mask id="svgmask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header.png" />
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="/images/header-image.png" />
        </svg>
    </div>

封面有 css:

.cover{
  height: 700px;
  width: 100%;
}

我想要什么: - 图像的宽度必须为 100%， mask 必须覆盖整个图像宽度，画笔不能是其上的图像:我想查看标题后面的网站内容，就像您在第二张图片中看到的那样.

图像尺寸: 1920x1256 刷子尺寸: 1422x721

Answer 1

非常感谢 Paul LeBeau 和 this overflow answer ，我发现我的画笔和图像需要具有相同的尺寸。结合正确设置的 viewBox 尺寸，我成功解决了问题!

代码:

<svg width="100%" height="100%" baseProfile="" version="1.2" preserveAspectRatio="xMinYMax slice" viewBox="0 0 1920 1256">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header3.png" /> 
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="<?= $s_Background ?>" />
        </svg>