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

标签 css svg vector vector-graphics

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

我首先尝试使用 CSS 将它放在 SVG 之上,但这并没有真正解决问题,所以然后我尝试查找如何将非矢量图像添加到基于矢量的 SVG 但这个问题可能表明我对 SVG 文件的工作原理几乎一无所知。

下面是我正在使用的当前 SVG 文件的代码,我还添加了一张图片来展示我希望它的样子。

不确定这是否重要,但我知道我要添加的图片不是矢量图,但由于我要添加的图片非常非常大,我非常有信心我网页的大多数浏览者会看到它比原来的尺寸小,这应该可以保持质量。

如果有人想看看这个并想帮助我找到解决我的问题的方法,那将不胜感激。谢谢!

Example of what I want the end result to look like

<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>

最佳答案

您可以添加一个 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"

关于css - 将 JPEG 图像添加到基于矢量的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39127519/

相关文章:

html - 背景图像垂直滚动但粘在容器的一侧

java - 从字符串创建 android.graphics.Path 对象

c++ - 试图将字符串添加到 vector

c++ - 返回多重映射的内容

javascript - 如何用内部 div 滚动临时替换主滚动

html - 具有从远容器边缘到屏幕左边缘的图形背景图像的内容的中央 div?

javascript - Electron :如何通过按钮隐藏/显示<br/>和<hr/>?

javascript - 使用 d3/svg 绘制锯齿形圆

html - d3,svg 中的 html,动画不透明度使 div 失去了位置,为什么?

svg - SVG组的不透明度/半透明度可以一起调整吗?