如何给 SVG 形状一个背景图像
How to give an SVG shape a background Image
我有一个 SVG 形状，它将有一个背景图像覆盖它。我想让这个背景图像 CMS 可编辑，而不是仅仅将图像插入我想用一个分配有背景图像的 SVG 容器来做到这一点，或者至少我可以使用它来允许 PHP 回显图像（如果通过 CMS 更改了图像）。
所以我在 illustrator 中创建了所需的形状并导出为 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 paths 添加到 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>
我有一个 SVG 形状，它将有一个背景图像覆盖它。我想让这个背景图像 CMS 可编辑，而不是仅仅将图像插入我想用一个分配有背景图像的 SVG 容器来做到这一点，或者至少我可以使用它来允许 PHP 回显图像（如果通过 CMS 更改了图像）。
所以我在 illustrator 中创建了所需的形状并导出为 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 paths 添加到 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>