响应式 SVG 遮罩

Question

我在 Stack 上查看了其他几个答案： Responsive SVG Clip Path or Mask Image Responsive SVG image mask

但是 none 似乎对我有用。我有一个基于路径的 SVG 蒙版。我希望它扩展以填充所有可用的 space（或收缩），同时保持路径的纵横比。

    svg {
        width: 100%;
        height: 100%;
    }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 237.859 264.582" preserveAspectRatio="xMinYMin meet">
  <defs>
    <pattern id="triangle-image" patternUnits="userSpaceOnUse" width="3918" height="3918">
      <image xlink:href="images/aspirational-photos/christian-buehner-JQFHdpOKz2k-unsplash.jpg" x="0" y="0" width="100%" height="100%" />
    </pattern>
    <pattern id="triangle-pattern" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <path id="triangle-path" d="M237.844,32.946c-0.001-9.981-4.42-19.279-12.121-25.512c-7.82-6.331-17.85-8.78-27.518-6.721
        c-3.373,0.717-6.639,1.979-9.707,3.751l-129.11,74.56l-42.942,24.8C6.147,109.771-0.001,120.42,0,132.312
        c0,11.892,6.149,22.541,16.449,28.487l84.623,48.833l87.457,50.486c7.179,4.143,15.193,5.435,23.174,3.736
        c15.41-3.279,26.166-16.532,26.156-32.222L237.844,32.946z"
              fill="#fff" fill-rule="evenodd" width="100%" height="100%" />
    </pattern>
    <mask id="triangle-mask" width="100%">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#triangle-pattern)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#triangle-image)" mask="url(#triangle-mask)"/>
</svg>

无论我做什么，SVG 似乎都遵循路径值。有没有办法让它像图像一样展开或收缩？

Answer 1

我已经简化了您的代码，因为我将蒙版应用于图像而不是使用图案。掩码也是路径。我没有使用 width="100%"，因为 svg 元素的宽度将占用所有可用的 space，即 100%。我想了解您为什么需要它 height="100%"

            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 265">
                <defs>
                    <mask id="triangle-mask">
                        <path d="M237.844,32.946c-0.001-9.981-4.42-19.279-12.121-25.512c-7.82-6.331-17.85-8.78-27.518-6.721
c-3.373,0.717-6.639,1.979-9.707,3.751l-129.11,74.56l-42.942,24.8C6.147,109.771-0.001,120.42,0,132.312
c0,11.892,6.149,22.541,16.449,28.487l84.623,48.833l87.457,50.486c7.179,4.143,15.193,5.435,23.174,3.736
c15.41-3.279,26.166-16.532,26.156-32.222L237.844,32.946z"
                        fill="#fff"  />
                    </mask>
                </defs>
            <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" mask="url(#triangle-mask)"/>
            </svg>

或者，如果您需要所有这些模式，请删除代码中的掩码 width="100%"。

响应式 SVG 遮罩

Responsive SVG Mask

css

svg

responsive-design