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

只需在 def 和 g 之间插入一个 image 元素。这是一个示例：

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

查看图像元素here

的完整规格

将背景图片添加到SVG

2 个答案: