Question

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

Answer 1

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

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

Answer 2

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

Answer 3

通过执行以下操作，我设法找到了解决方案。这两个答案确实也可以解决问题：）

> git clone https://github.com/bert2/ef-vs-garbage-db.git
> cd .\ef-vs-garbage-db\
> dotnet test

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

3 个答案: