Как заключить background-image в красный фон данного svg

Question

есть такой файл в формате svg. Как задать, чтобы красная часть данного svg была заполнена картиной. CodePen

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<path fill-rule="evenodd"  fill="rgb(202, 3, 3)"
 d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
</svg>

Решение из прошлого вопроса не подойдет? То есть, с помощью SVG обрезать блок просто. (https://ru.stackoverflow.com/questions/921896/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%82%D0%B0%D0%BA%D1%83%D1%8E-%D1%84%D0%BE%D1%80%D0%BC%D1%83-%D0%B4%D0%BB%D1%8F-%D1%81%D0%B5%D0%BA%D1%86%D0%B8%D0%B8) — Kol007, Dec 17 '18 at 10:45
Никита, было бы отличное решение, только вот я не могу создать точно такой же svg овал как на макете( — Dan, Dec 17 '18 at 11:37
@Danielqwaqwaqwa а зря отказались от моего решения. В принятом вами решении, чтобы вам заменить картинку и поставить её на фон, нужно будет всегда конвертировать в формат base64. Код всегда будет выглядеть просто чудовищно. В моем решении для замены картинки нужно просто менять URL. Второй минус формат base64 это на самом деле не svg - поэтому не анимируется, не стилизуется — Alexandr_TT, Dec 17 '18 at 12:11
@Daniel qwaqwaqwa сделал второй пример для обоснования своего предыдущего комментария — Alexandr_TT, Dec 17 '18 at 13:05

Alexandr_TT · Accepted Answer · 2018-12-17T11:18:10.773

Чтобы разместить фоновое изображение внутри криволинейной области, необходимо использовать команду svg clipPath

Картинка добавляется внутрь файла svg и поэтому у вас никогда не сломается вёрстка при изменении размера окна браузера, всё будет меняться адаптивно.
Во вторых, вы всегда можете заменить картинку на другую, поменяв только URL картинки.

<svg  xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
 <defs>
  <clipPath id="clip"> 
  <path   
 d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
  </clipPath>
 </defs> 
 <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" clip-path="url(#clip)" />
</svg>

Вырезание картинки с помощью mask

<svg  xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="699px"> 
 <defs>
  <mask id="msk1">
<path  fill="white" 
 d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
  </mask>
 </defs> 
 <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

У маски в отличии от clipPath более широкие возможности. Можно одновременно показать обе части изображения с разной прозрачностью.

<svg  xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
 <defs>
  <mask id="msk1"> 
  <rect width="100%" height="100%" fill="grey"  />
<path  fill="white" 
 d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
  </mask>
 </defs> 
 <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

Alexandr_TT · Answer 2 · 2018-12-17T16:06:03.990

Вариант с анимируемой маской

Эта техника универсальна.

Блок может быть добавлен в любую часть HTML вёрстки.
В примере ниже показано, как это может быть использовано в качестве анимируемой шапки сайта.

Также эта техника может быть использована для оживления любой картинки внутри сайта.
Можно добавлять любой текст, в любое место картинки, который может быть динамично изменен с помощью JS. В примере - Site Daniel
Вёрстка никогда не сломается при изменении размера окна браузера, при использовании любого гаджета.

Детали реализации

Эффект анимации достигается изменением аттрибута "d" патча, который входит в состав маски.

<animate attributeName="d" ..../>

Маска состоит из двух частей:

прозрачная часть определяется патчем fill="white"
полупрозрачная часть это, - прямоугольник на всю ширину

<rect width="100%" height="100%" fill="red"/>

Более подробно о масках здесь

Смотрите в полный экран, иначе не увидите анимации, она внизу

<div class="container">
<svg viewBox="0 0 500 220" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<mask id="msk1" > 
<rect width="100%" height="100%" fill="red"/>
<g transform="translate(0 130)">
<path transform="translate(0 -100)" d="M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill:white;"> 
<animate 
    attributeName="d"
 dur="10s"
 repeatCount="indefinite" 
 values="
    M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z;
    M-1.41,129.77 C178.61,82.39 314.61,149.50 501.97,149.50 L500.00,0.00 L0.00,0.00 Z;
    M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z"  />
</path>
</g>
</mask>
    <image xlink:href="https://i.stack.imgur.com/J8XTf.jpg" width="100%" height="100%" mask="url(#msk1)" />
   <text x="50" y="155" font-size="36" fill="red">Site Daniel </text>
 </svg>
</div>

@ПавелВаршавский ты же читал мою статью по маскам? Вот для справки - https://ru.stackoverflow.com/a/919187/28748 раздел Обработка фона вне маски — Alexandr_TT, Dec 17 '18 at 13:19

score 0 · Answer 3 · answered Dec 17 '18 at 11:14

Если у вас есть область в svg, вы вполне её можете использовать как маску для своего background свойства

.custom-block{
      height: 800px;
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjEwMCUiIGhlaWdodD0iNjk5cHgiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDIwMiwgMywgMykiDQogZD0iTTAuMDAwLC0wLjAwMCBMMTkyMC4wMDAsLTAuMDAwIEwxOTIwLjAwMCw2MTUuOTk5IEMxOTIwLjAwMCw2MTUuOTk5IDE0MDcuMDAwLDc2Ny45OTkgOTY0LjAwMCw2NTkuOTk5IEM0OTYuMzY3LDU0NS45OTQgMC4wMDAsNjE1Ljk5OSAwLjAwMCw2MTUuOTk5IEwwLjAwMCwtMC4wMDAgWiIvPg0KPC9zdmc+');
    background: yellow;
    -webkit-mask-repeat: no-repeat;
    width: 100%;
}
body{
background: blue;
}

<div class="custom-block"></div>

Примечание:

1) в mask-image: можно передать изображение теми же способами что и в background-image

2) когда у дива есть свойство mask-image, background будет работать в его рамках, те вы вполне сможете вставить туда и картинку и цвет и градиент и вообще все что поддерживает свойство background

3) насчет поддержки можете посмотреть здесь https://caniuse.com/#feat=css-masks

Я знаю, как неприятно, когда отдадут решение, потом заберут его назад. Эти виртуальные +15, конечно же ничего не решают. Это всё азартная игра. Но всё равно неприятно, знаю по себе :))) Поэтому я компенсировал вам потери на других ваших хороших ответах И поздравляю вас с первой круглой цифрой! — Alexandr_TT, Dec 17 '18 at 13:46
@Alexandr_TT до нового года хотел её получить)) Спасибо вам и с наступающим вас новым годом) — lazyproger, Dec 18 '18 at 06:19
и вас с наступающим Новым годом, самым лучшим праздником! Пусть сбудется то, о чём мечтаете и получится, то, чего хотите — Alexandr_TT, Dec 18 '18 at 06:23

Как заключить background-image в красный фон данного svg

3 Answers3

Вариант с анимируемой маской