将JPEG图像添加到基于矢量的SVG

Question

基本上我所拥有的是一个SVG文件，可以在45度处创建垂直阴影线，这对网页背景产生了很好的效果，线性渐变在相同的45度。但是，我希望在SVG文件中添加一张图片，以便在SVG创建的6条线中的两条线之间有一张图片。

我首先尝试使用CSS将它放在SVG的顶部，但这并没有真正解决，所以我试着查找如何将非矢量图像添加到基于矢量的SVG但是这个问题可能是显示我对SVG文件的工作方式几乎没有理解。

下面是我正在使用的当前SVG文件的代码，我还添加了一张图片，以显示我希望它看起来像。

不确定是否重要，但我知道我要添加的图片不是矢量，但是我要添加的图片非常非常大我对我网页的大多数观看者非常有信心会看到它比它的原始尺寸小，这应该保持质量好。

如果有人想看看这个，并希望帮助我找到解决问题的方法，那将非常感激。谢谢！

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
    <style type="text/css"><![CDATA[
		.p-4 { fill: rgba(255,255,255,0.16); }
		.p-3 { fill: rgba(255,255,255,0.12); }
		.p-2 { fill: rgba(255,255,255,0.08); }
		.p-1 { fill: rgba(255,255,255,0.04); }
		.p0 { fill: none; }
		.p1 { fill: rgba(0,0,0,0.025); }
		.p2 { fill: rgba(0,0,0,0.05); }
		.p3 { fill: rgba(0,0,0,0.075); }
		.p4 { fill: rgba(0,0,0,0.1); }
    ]]></style>
	<polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
	<polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
	<polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
	<polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
	<polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
	<polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
	<polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
	<polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
	<polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
</svg>

更新的SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
    <style type="text/css"><![CDATA[
		.p-4 { fill: rgba(255,255,255,0.16); }
		.p-3 { fill: rgba(255,255,255,0.12); }
		.p-2 { fill: rgba(255,255,255,0.08); }
		.p-1 { fill: rgba(255,255,255,0.04); }
		.p0 { fill: none; }
		.p1 { fill: rgba(0,0,0,0.025); }
		.p2 { fill: rgba(0,0,0,0.05); }
		.p3 { fill: rgba(0,0,0,0.075); }
		.p4 { fill: rgba(0,0,0,0.1); }
    ]]></style>
	<polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
	<polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
	<polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
	<polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
	<polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
	<polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
	<polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
	<polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
	<polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
	<image x="20" y="20" width="477" height="640"
     xlink:href=../../../images/my_image.png"" />
</svg>

Answer 1

您可以将clipPath添加为您希望图像显示的多边形。

例如对于p2：

<defs>
<clipPath id="polygon_p2_mask">
<polygon points="375,0 1375,1000 1625,1000 625,0" />
</clipPath>
</defs>

然后是你的形象：

<image clip-path="url(#polygon_p2_mask)" .... />

注意：那么您不需要polygon class =“p2”

Answer 2

您可以将其中一个多边形转换为剪切路径，将图像限制为一个“切片”。

请注意我对以下示例所做的其他一些事情：

1. 我已从width标记中删除了height和<svg>属性。现在这意味着SVG会缩放以适合页面（或其父级）。而不是固定在1000x1000的大小。见下文。

2. 我已将图片设置为preserveAspectRatio="xMidYMid slice"。这相当于HTML元素上的backrgound-size: cover。它可确保图像填充整个1000x1000图像大小，边缘周围没有任何间隙。

最后，我想指出你的前四个切片是白色的，具有不同的不透明度。这是有意的吗？在白色背景上，它们不会出现（白色为白色）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" zoomAndPan="disable">
    <style type="text/css"><![CDATA[
		.p-4 { fill: rgba(255,255,255,0.16); }
		.p-3 { fill: rgba(255,255,255,0.12); }
		.p-2 { fill: rgba(255,255,255,0.08); }
		.p-1 { fill: rgba(255,255,255,0.04); }
		.p0 { fill: none; }
		.p1 { fill: rgba(0,0,0,0.025); }
		.p2 { fill: rgba(0,0,0,0.05); }
		.p3 { fill: rgba(0,0,0,0.075); }
		.p4 { fill: rgba(0,0,0,0.1); }
    ]]></style>
  <defs>
    <clipPath id="p1-clip">
      <polygon points="125,0 1125,1000 1375,1000 375,0"/>
    </clipPath>
  </defs>
	<polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
	<polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
	<polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
	<polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
	<polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
	<!-- <polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" /> -->
	<polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
	<polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
	<polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
	<image x="0" y="0" width="1000" height="1000"
           preserveAspectRatio="xMidYMid slice"
           xlink:href="http://placekitten.com/640/477"
           clip-path="url(#p1-clip)" />
</svg>