Question

我有一个带有图像标题的响应式网站（全角）。在那个图像的顶部，我有一个SVG蒙版，我有这个，所以我在标题的底部有一个绘画般的外观。问题是，我的图像没有按比例缩放以适应宽度。我希望它是100％宽和700px高（或类似覆盖它的父母，就像你通常会做的那样：背景大小：封面）。

这就是我想要的：

这是我迄今取得的成就（图像不同但无关紧要：

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

我正在使用的代码：

<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％，面具必须覆盖整个图像宽度，画笔不能是图像的顶部：我想看到标题后面的网站内容，就像你在第二张图片中看到的那样

图片尺寸： 1920x1256 刷子尺寸： 1422x721

Answer 1

如果您希望SVG扩展以适合其容器（cover），则需要告诉浏览器SVG的内容有多大。如果它不知道它有多大，它就无法扩展SVG。

您可以使用viewBox属性执行此操作。

您尚未提供有关图片大小的任何信息。但是假设，为了这个例子，它是1024x768。然后将SVG根标记更改为：

<svg width="100%" viewBox="0 0 1024 768">

您可能还想更改preserveAspectRatio属性，使其位于容器的顶部：

<svg width="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMin meet">

更新

这是一个400x200图像缩放以适合页面的示例。

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

<div class="cover">
    <svg width="100%" viewBox="0 0 400 200" preserveAspectRatio="xMidYMin meet">
        <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="http://lorempixel.com/400/200/" />
    </svg>
</div>

Answer 2

非常感谢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>

Answer 3

将此放入您的CSS样式

 #the-mask {
      position: fixed; 
      top: 0; 
      left: 0; 

      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    }

或

您可以使用它来应用全屏背景图像

html { background: url(/images/header-image.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

带面具的全宽图像

3 个答案:

更新