将背景图像应用于具有多个路径元素的 SVG

如何解决将背景图像应用于具有多个路径元素的 SVG

我有一个带有 2 个路径的 SVG，可以创建一个 V 形

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414 600"><path d="M395.2-41.3c-22.6-26.9-63.1-26.9-85.8 0L204.7 78.8 102.5-38.4c-11.4-13-26.8-20.4-42.9-20.4C24.5-59.1-1.7-23.9-1 10.7c0 18.4 6.4 36.1 17.8 49.1 0 0 185.5 212.3 188 214.3 2.4-2 190.5-217.2 190.5-217.2 23.4-25.8 23.4-72.4-.1-98.2z"/><path d="M395.3 260.8c-22.6-26.9-63.1-26.9-85.8 0l-104.7 120-102.2-117.1c-11.4-13-26.8-20.4-42.9-20.4-35.2-.3-61.4 34.9-60.6 69.5 0 18.4 6.4 36.1 17.8 49.1 0 0 185.5 212.2 188 214.3 2.4-2.1 190.5-217.2 190.5-217.2 23.4-25.8 23.3-72.4-.1-98.2z"/></svg>

我想将单个背景图像应用于固定到位且响应迅速的路径。

到目前为止，我能够实现这一点的唯一方法是将 SVG 高度/宽度设置为 0，使用 <clipPath id="svgPath"> 包裹路径 - 创建一个具有以下 CSS 属性的 div：>

background-image: url('https://assets.codepen.io/176014/keep-in-touch-bg.jpeg');
height: 666px;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
background-position: -60px -90px;
clip-path: url(#svgPath);

这根本不灵活。

我还缺少其他方法吗？