正确对齐 SVG 多边形

Question

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

所以基本上，问题是，左下角和右上角的边框正在切割我的shpe边缘。我试图减小多边形的宽度/高度，但它无法正常工作。它保持小或切割更多，使其成为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。 所以这就是你得到"修剪"角的部分原因 - 你的图案没有扩展多边形的整个宽度和高度。

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

这是一个演示。

还是不太对劲。 顶部和底部仍然有很小的差距。 这是因为多边形/图案的纵横比 （900/490 ~= 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"/>

这是一个演示。

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

您可以在此处阅读有关 preserveAspectRatio 的更多信息。

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)"/>

js小提琴：http://jsfiddle.net/rfornal/1rmd2otz/3/

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