Добавить фоновое изображение в SVG - PullRequest
Новая
       17

Добавить фоновое изображение в SVG

0 голосов
/ 24 июня 2019

У меня есть SVG-код, который я получил со слоя Photoshop. Я хочу добавить фоновое изображение в этой кривой 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>

Ответы [ 2 ]

1 голос
/ 24 июня 2019

Вы можете использовать путь в качестве обтравочного контура для изображения. 

 <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>
0 голосов
/ 24 июня 2019

Просто вставьте элемент image между defs и g . Вот пример: 

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

См. Полную спецификацию для image elements здесь

...