Question

所以，我一直试图制作一个投资组合页面，我想使用自定义形状。因此，我没有使用div，而是使用svg多边形形状来获得背景img。请注意，这是我第一次与svg打交道并且我试图整天修复它。

基本上，问题是，左下角和右上角的边框正在切断我的边缘。我试图减少多边形的宽度/高度，但它不能正常工作。它保持小或切割更多，使其成为一个swuare形状..

这是我的html代码，也是一个有效的jsfiddle：http://jsfiddle.net/1rmd2otz/1/

<div class="sv-img">
    <svg class="svg" viewBox="0 0 910 500" >
        <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
                <image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" />
            </pattern>
        </defs>
        <polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
    </svg>
</div>

那么，任何人都可以帮助我吗？

Answer 1

好的，我看到了一些错误。让我们从第一个开始，然后解决它。

首先，您的多边形为900x490，但您指定的尺寸为890x480。这就是为什么你得到修剪的部分原因＆＃34;角落 - 您的图案不会延伸多边形的整个宽度和高度。

如果我们解决这个问题，我们几乎可以解决问题。我添加了一条红线，以更清晰地显示多边形轮廓。

Here's a demo.

它仍然不太对劲。顶部和底部仍然有很小的空隙。原因是因为多边形/图案的纵横比（900 / 430~ = 1.84）与图像的纵横比（570/300 = 1.9）不同。渲染器正在做的是将500x370图像缩放到适合您为<image>指定的尺寸内，同时保持相同的宽高比。这导致图像为900 x 473.7（473.7 = 900 / 1.9），垂直居中于900x490图案。它在顶部和底部留下大约6个像素。

有几种方法可以解决这个问题。显然，可以改变图像或多边形，使其纵横比完全匹配。

解决此问题的另一种方法是更改图像缩放的方式。默认情况下，图像会按比例放大以适合您指定的宽度和高度，但不会超出这些尺寸。这意味着有时会留下一个空隙 - 就像我们所看到的那样。您可以将其更改为不同的缩放模式，告诉它缩放以适应最大尺寸，不留间隙。您可以通过在图像上设置preserveAspectRatio="xMidYMid slice"来实现此目的。

<image xlink:href="[...snip...]"
       x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/>

Here's a demo of that.

您可以看到多边形现在已完全填满。

You can read more about preserveAspectRatio here.

Answer 2

看起来您的问题出在多边形点上。改变......

<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>

要......

<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>

jsFiddle：http://jsfiddle.net/rfornal/1rmd2otz/3/

这可能不是您想要的，但应该让您朝着正确的方向前进。您可以在另一侧执行此操作并更改SVG viewBox值（加宽它们）。

正确对齐svg多边形

2 个答案: