How to fill the svg by using it as background for after selector?-CodePudding

How can I change the fill color dynamically for the background-image inside of section::after. I tried with class name but that does not work.

body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
}

section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    margin-bottom: 20vw;
    background-color: #222;
    padding: 1rem 0;
}

section::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 20vw;
    background-size: 100%;
    transform: translate(0, 100%);
    background-color: #fff;
    background-image: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='#222222' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circle cx='814.5' cy='165.6' r='25'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z'/></svg>");

}

<section>
  <h1>
    Section1
  </h1>
  <p>
    A test paragraph.
  </p>
</section>

CodePudding user response：

setTimeout(()=>{
  $(".mysection").css("background-color","purple");
  $(".mysvg").attr("fill","purple")}
,1000)

body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
}

section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    margin-bottom: 0;
    background-color: #222;
    padding: 1rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section >
  <h1>
    Section1
  </h1>
  <p>
    A test paragraph.
  </p>
</section>
<svg  xmlns='http://www.w3.org/2000/svg' fill='#222222' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circle cx='814.5' cy='165.6' r='25'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z'/></svg>

CodePudding user response：

Use it as mask:

body {
  margin: 0;
  padding: 0;
  color: #fff;
}

section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 60vh;
  margin-bottom: 20vw;
  background-color: red;
  padding: 1rem 0;
}

section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20vw;
  transform: translate(0, 100%);
  background-color: red; /* your color here */
  -webkit-mask: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='#000' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circle cx='814.5' cy='165.6' r='25'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z'/></svg>") 0 0/100% auto;
}

<section>
  <h1>
    Section1
  </h1>
  <p>
    A test paragraph.
  </p>
</section>