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

114
21 июня 2019, 19:00

есть такой файл в формате 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>

Answer 1

Чтобы разместить фоновое изображение внутри криволинейной области, необходимо использовать команду 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>

Answer 2

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

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

  • Блок может быть добавлен в любую часть HTML вёрстки.

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

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

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

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

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

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

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

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

Answer 3

Если у вас есть область в 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

READ ALSO
Как изменить стиль forms.IntegerField в Django

Как изменить стиль forms.IntegerField в Django

Появилась проблемаА конкретно, при выводе формы в шаблон, поле IntegerField, имеет стандартную джанговскую отрисовку, соответственно теряется...

99
Вывод текста js

Вывод текста js

У меня есть строка в json файле:

90
Как сделать чтоб это заработало?

Как сделать чтоб это заработало?

Почему вот так работает

90