svg 图像蒙版切割顶部和底部答案

【问题标题】：Svg image mask cut top and bottomsvg 图像蒙版切割顶部和底部
【发布时间】：2017-06-17 00:14:21
【问题描述】：

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

首先我尝试使用 css 掩码，但问题是浏览器的支持。所以我跳到里面有面具的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

谢谢拉瑟

【问题讨论】：

标签： html css svg mask

【解决方案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>

【讨论】：