Question

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

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

我的SVG图像存在问题，其中遮罩的顶部和底部被切断。

我已经创建了一个codepen来向您展示问题：

<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

谢谢Lasse

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>

Svg图像蒙版切割顶部和底部

1 个答案: