如何创建响应式.SVG并将其用作掩码？

Question

我有一个我创建的设计，我希望在两个状态之间进行动画处理（登录 - ＆gt;仪表板）。

之前（登录）

之后（仪表板）

当用户成功登录后，他们会看到：

• 气泡重新定位
• 红色气泡进入“炉温”卡
• 标题图片形成标题栏
• 图标移至标题栏
• 登录按钮消失

此设计需要在桌面和移动设备上运行。

问题

在保持响应式设计的同时，将此标题图像转换为标题栏的最佳方法是什么？

我的方法

我将使用SVG作为图像的遮罩。图像将使用css作为div标签的背景图像。 SVG将屏蔽此div标签。然后，当用户登录时，我会将蒙版设置为正方形以匹配标题。

方法的问题

我不能让内联SVG在宽度上做出响应，同时保持一致的高度（300px）。

Answer 1

您不需要SVG蒙版来实现图像形状。你可以用边界半径来做。

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

document.getElementById("collapse").addEventListener("click", function() {
  document.getElementById("header").classList.toggle("collapsed");
});

#header {
  width: 100%;
  height: 300px;
  background-image: url(http://lorempixel.com/500/500/city/);
  background-size: cover;
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  transition: all 0.5s ease-in-out;
}

#header.collapsed {
  height: 50px;
  border-radius: 0;
}

<div id="header">
</div>

<button id="collapse">Toggle</button>

如果你不喜欢左右边缘的半径形状，那么只需使<div>略宽于屏幕，以便将它们剪掉。

我还可以向您展示如何使用SVG蒙版进行操作，但它不那么简单。

使用SVG掩码

在这种情况下，我们使用<path>设计蒙版形状。然后使用两个动画元素。一种是通过将路径补间到平面矩形形状来折叠蒙版形状，另一种是将其补间回到其展开的形状。

为了在我们需要时触发这些动画，我们将<animate> begin次设置为"indefinite"。然后，我们可以通过调用每个动画元素的beginElement()方法来设置每个动画的运行。

var expanded = true;

document.getElementById("collapse-btn").addEventListener("click", function() {
  if (expanded) {
    document.getElementById("collapse-anim").beginElement();
  } else {
    document.getElementById("expand-anim").beginElement();
  }
  expanded = !expanded;
});

<div id="header">
  <svg width="100%" height="300px">
    <mask id="hdrmask" maskContentUnits="objectBoundingBox">
      <path d="M 0,0 L 1,0 L 1,0.75 C 0.75,1.08 0.25,1.08 0,0.75 Z" fill="white">
        <animate id="collapse-anim" attributeName="d" begin="indefinite" dur="0.5s" fill="freeze"
                 to="M 0,0 L 1,0 L 1,0.25 C 0.67,0.25 0.33,0.25 0,0.25 Z" />
        <animate id="expand-anim" attributeName="d" begin="indefinite" dur="0.5s" fill="freeze"
                 to="M 0,0 L 1,0 L 1,0.75 C 0.75,1.08 0.25,1.08 0,0.75 Z" />
      </path>
    </mask>
    
    <image xlink:href="http://lorempixel.com/500/500/city/" width="100%" height="300px"
           preserveAspectRatio="xMidYMid slice" mask="url(#hdrmask)"/>
  </svg>
</div>

<button id="collapse-btn">Toggle</button>

要获得紫色色调，您需要做的就是将图像放在一个带有透明紫色矩形的组中，然后将蒙版应用于该组。

var expanded = true;

document.getElementById("collapse-btn").addEventListener("click", function() {
  if (expanded) {
    document.getElementById("collapse-anim").beginElement();
  } else {
    document.getElementById("expand-anim").beginElement();
  }
  expanded = !expanded;
});

<div id="header">
  <svg width="100%" height="300px">
    <mask id="hdrmask" maskContentUnits="objectBoundingBox">
      <path d="M 0,0 L 1,0 L 1,0.75 C 0.75,1.08 0.25,1.08 0,0.75 Z" fill="white">
        <animate id="collapse-anim" attributeName="d" begin="indefinite" dur="0.5s" fill="freeze"
                 to="M 0,0 L 1,0 L 1,0.25 C 0.67,0.25 0.33,0.25 0,0.25 Z" />
        <animate id="expand-anim" attributeName="d" begin="indefinite" dur="0.5s" fill="freeze"
                 to="M 0,0 L 1,0 L 1,0.75 C 0.75,1.08 0.25,1.08 0,0.75 Z" />
      </path>
    </mask>

    <g mask="url(#hdrmask)">
      <image xlink:href="http://lorempixel.com/500/500/city/" width="100%" height="300px"
             preserveAspectRatio="xMidYMid slice"/>
      <rect width="100%" height="100%" fill="purple" fill-opacity="0.5"/>
    </g>
  </svg>
</div>

<button id="collapse-btn">Toggle</button>