jQuery addClass example

Change class name on click in jQuery

by davehol

HTML

<div class="background-image-div" >

<div class="image-wrapper">
    <!-- IMAGE MASK -->
    <svg id="svg-rmit" class="clip-svg">
      <rect class='svg-background' width="100%" height="100%" fill="#ffffff" />
      <image  id="img-1" class='svg-image' width="345" height="336" xlink:href="https://www.rmit.edu.au/content/dam/rmit/rmit-images/marketing-only/campaigns/Postgrad/2018-postgrad/dianne-mangaliman-accounting-student-laptop-mentor-1220x732.jpg.transform/rendition-480x280/image.jpg" preserveAspectRatio="xMinYMin slice" />
    </svg>
</div>

<!-- SVG PIXEL SHAPE -->
<svg  id="svg-defs"  viewBox="0 0 400 400">
    <defs>
        <clipPath id="clip-polygon">
        <path d="M176.159473,0 L131.204737,0 L131.204737,36.3897782 L56.3117228,36.3897782 L56.3117228,112.220163 L0,112.220163 L0,224.408874 L57.0057608,224.408874 L57.0057608,298.257793 L131.204737,298.257793 L131.204737,336 L170.796452,336 C263.292794,336 345,261.679304 345,168.456052 C344.603064,75.6337895 269.262798,0.465083888 176.159473,0 Z" id="path-1">
        </path>
        </clipPath>
    </defs>
</svg>
</div>

CSS

html, body {
  margin: 0;
}
body {
  background-color: #f5f5f5;
}

.svg-background,
.svg-image {
  clip-path: url(#clip-polygon);
}

svg.clip-svg {
  position: relative;
  height: 600px;
  width: 600px;
}

#svg-rmit {
  left: 0px;
  top: 0px;
}

.background-image-div {
  width: 100%;
  display: block;
  height: 90vh;
  }

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})