html - Svg 图像蒙版剪切顶部和底部

Question

我需要创建具有这种形状的图像: http://imgh.us/image-mask_1.svg

首先我尝试使用 css 掩码，但问题是浏览器的支持。所以我跳到里面有 mask 的 svg 图像。

我在处理 SVG 图像时遇到问题，其中蒙版的顶部和底部被截断了。

我创建了一个代码笔来向您展示问题:

<svg width="551" height="397" viewBox="0 0 551 397">
  <defs>
    <mask id="section_mask">
      <image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" />
    </mask>
  </defs>

  <image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" />
</svg>

http://codepen.io/lasse_head/pen/ObJLKN

谢谢拉塞

Answer 1

发生这种情况是因为蒙版图像的宽高比错误。原始图像为 1024 x 682。比率为 1.71788413。因此，如果您希望高度为 397px，则宽度应为 397 x 1.71788413 = 596px。但是，您将其设置为 551px。这就是裁剪的原因。

<svg width="551" height="397" viewBox="0 0 551 397">
  <defs>
    <mask id="section_mask">
      <image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" />
    </mask>
  </defs>

  <image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" />
</svg>