我有一个SVG形状，这将有一个背景图像覆盖它。我想使这个背景图片CMS编辑等等，而不只是plonk的形象我想与分配有一个背景图像，或者至少是我可以用它来让PHP呼应出SVG容器做到这一点图像，如果它得到通过CMS改变。
所以我创建插画内所需的形状和出口为SVG提供了这样的代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
<style>
.cls-1{fill:#eeeeef;}
.cls-2{fill:url(#linear-gradient);}
.cls-3{fill:url(#linear-gradient-2);}
.cls-4{fill:url(#linear-gradient-3);}
</style>
<linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="0" stop-color="#9bdbf4"/>
<stop offset="0" stop-color="#29b2e7"/>
<stop offset="1" stop-color="#8082be"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/>
</defs>
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/><path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
<path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/>
<path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
<path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
</g>
</g>
</svg>灰色部分我现在想通过从灰SVG容器不会溢出的图像覆盖。
似乎无法找到任何真正解决了SVG的这种格式？
为了清楚我已经简化你的代码。
我使用你的灰色路径作为clipPath元素的路径，并为图像我使用clip-path="url(#_clip)"
svg{width:90vh;}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
<clipPath id="_clip">
<path d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/><path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
</clipPath>
</defs>
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="240" width="250" clip-path="url(#_clip)"></image>
</g>
</g>
</svg>cls-1路径添加到clipPath定义（ID为#clip_path说），并添加一个image元素（以下样本红色图像）风格url(#clip_path) - 见下面的演示：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
<style>
.cls-1{fill:#eeeeef;}
.cls-2{fill:url(#linear-gradient);}
.cls-3{fill:url(#linear-gradient-2);}
.cls-4{fill:url(#linear-gradient-3);}
.mask {clip-path: url(#clip_path);}
</style>
<linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="0" stop-color="#9bdbf4"/>
<stop offset="0" stop-color="#29b2e7"/>
<stop offset="1" stop-color="#8082be"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/>
<clipPath id="clip_path">
<path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
<path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/>
<path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
</clipPath>
</defs>
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<image class="mask" xlink:href="https://placehold.it/500/FF0000"></image>
<path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/>
<path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
</g>
</g>
</svg>我已设法通过执行以下操作找到了一个解决方案。 2个回答似乎也做的伎俩:)
<!-- SVG Shape saved as .svg in illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs><style>.cls-1{}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#9bdbf4"/><stop offset="0" stop-color="#29b2e7"/><stop offset="1" stop-color="#8082be"/></linearGradient><linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/>
<!-- This is the path that the image should be contained withing. The "fill" is the id of the <defs> tag which defines what the image is -->
<path fill="url(#imgpattern)" class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/><path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/><path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/><path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/></g></g>
<!-- This is what defines what the bg of SVG should be. Add your ACF code to xlink:href="" to echo the image. -->
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="100%" height="100%"
preserveAspectRatio="xMinYMin slice"
xlink:href="image1.jpg"/>
</pattern>
</defs>
</svg>