如何为 SVG 形状提供背景图像答案

【问题标题】：How to give an SVG shape a background Image如何为 SVG 形状提供背景图像
【发布时间】：2019-07-01 14:34:20
【问题描述】：

我有一个 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 格式的东西？

【问题讨论】：

标签： html css svg background-image

【解决方案1】：

通过执行以下操作，我设法找到了解决方案。 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>

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答。设法得到这个工作，感谢您的帮助。我的解决方案与此不太一样，但查看多种方法很有用:)

【解决方案3】：

为了清楚起见，我已经简化了您的代码。

我使用您的灰色路径作为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>

【讨论】：