html - 如何创建响应式 .SVG 并将其用作 mask ？

Question

我创建了一个设计，希望在两种状态(登录 -> 仪表板)之间进行动画处理。

之前(登录)

之后(仪表板)

当用户成功登录后，他们将看到:

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

此设计需要在桌面和移动设备上工作。

问题

在保持响应式设计的同时使此标题图像过渡到标题栏的最佳方法是什么？

我的方法

我将使用 SVG 作为图像的 mask 。该图像将使用 css 作为 div 标签的背景图像来完成。 SVG 将屏蔽此 div 标签。然后，当用户登录时，我会将蒙版动画化为正方形以匹配标题。

方法的问题

我无法使内联 SVG 在保持一致的高度 (300px) 的同时响应宽度。

Answer 1

您不需要 SVG mask 来实现图像形状。您可以使用边界半径来做到这一点。

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 mask 来完成此操作，但要简单得多。

带有 SVG mask

在本例中，我们使用 <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>

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

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>