0

https://jsfiddle.net/4n7j5a1t/

I'm using a svg shape divider but how I can change the background color to a background image in the fill CSS property ?

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>

This is what I have tried so far but it does not keep the svg shape in place (wave):

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <defs>
          <pattern id="imgpattern" x="0" y="0" width="1" height="1">
            <image width="120" height="250"
                   xlink:href="https://example.com/slider-bg.png"/>
          </pattern>
      </defs>
    <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill" fill="url(#imgpattern)"></path>
</svg>

Thanks.

Maman
  • 97
  • 6

1 Answers1

0

EDIT You have to define the image and then add it as a fill.

You can read more about this here

I'm not sure if this is what you wanted but I hope it helps. If not try to explain a little more and I might be able to help you.

Cheers!

 
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
            <image xlink:href="https://image.api.playstation.com/vulcan/img/rnd/202011/0714/vuF88yWPSnDfmFJVTyNJpVwW.png" x="0" y="0"
                width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    </defs>
    <path fill="url(#img1")" d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
    
</svg>
Alex Florin Ciuciulete
  • 67
  • 5
  • 1
    Hello and thanks for your support. What I want is to fill the black background color. Hope it helps to understand more the issue. – Maman Jan 12 '22 at 11:04