将背景图片添加到SVG

Question

我有从photoshop图层获得的SVG代码。 我想在该svg曲线中添加背景图像。 请帮助我如何添加图像或背景。

.Shape_1 {
    background-color: rgb(0, 0, 0);
    box-shadow: -7.314px -6.82px 30px 0px rgba(1, 80, 50, 0.28);
    position: absolute;
    left: -15px;
    top: 83px;
    width: 592px;
    height: 779px;
    z-index: 7;
}

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="651px" height="838px">
  <defs>
      <filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" 
          width="651px" height="838px">
      <feOffset in="SourceAlpha" dx="-7.314" dy="-6.82" />
      <feGaussianBlur result="blurOut" stdDeviation="5.477" />
      <feFlood flood-color="rgb(1, 80, 50)" result="floodOut" />
      <feComposite operator="atop" in="floodOut" in2="blurOut" />
      <feComponentTransfer>
      <feFuncA type="linear" slope="0.28" />
      </feComponentTransfer>
      <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
      </feMerge>
      </filter>
    </defs>
    <g filter="url(#Filter_0)">
      <path fill-rule="evenodd" fill="rgb(0, 0, 0)"
      d="M325.482,36.000 C325.482,36.000 251.567,261.626 539.526,431.976 
      C604.104,470.179 726.372,630.863 483.087,815.000 L36.000,815.000 
        L36.000,38.776 L325.482,36.000 Z" />
    </g>
</svg>

Answer 1

您可以将该路径用作图像的剪切路径。

 <clipPath id="clip">
          <path
            d="M325.482,36.000 C325.482,36.000 251.567,261.626
               539.526,431.976C604.104,470.179 726.372,630.863 483.087,815.000
               L36.000,815.000L36.000,38.776 L325.482,36.000 Z" />
 </clipPath> 

接下来，您需要一个<image>元素。 您可以使用剪切路径id="clip"剪切图像：

<image xlink:href="whatever.jpg" clip-path="url(#clip)"/>

这是一个例子：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="651px" height="838px"> <defs> <filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="651px" height="838px"> <feOffset in="SourceAlpha" dx="-7.314" dy="-6.82" /> <feGaussianBlur result="blurOut" stdDeviation="5.477" /> <feFlood flood-color="rgb(1, 80, 50)" result="floodOut" /> <feComposite operator="atop" in="floodOut" in2="blurOut" /> <feComponentTransfer> <feFuncA type="linear" slope="0.28" /> </feComponentTransfer> <feMerge> <feMergeNode /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <clipPath id="clip"> <path d="M325.482,36.000 C325.482,36.000 251.567,261.626 539.526,431.976 C604.104,470.179 726.372,630.863 483.087,815.000 L36.000,815.000 L36.000,38.776 L325.482,36.000 Z" /> </clipPath> </defs> <g filter="url(#Filter_0)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pipes.jpg" clip-path="url(#clip)"/> </g> </svg> 

Answer 2

只需在defs和g之间插入一个图像元素即可。 这是一个例子：

<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100%" width="100%"/>

在此处查看图像元素的完整规格