jQuery addClass example

Change class name on click in jQuery

by davehol

HTML

<div class wrap>



<!-- SVG PIXEL SHAPE -->
<svg  id="svg-defs" viewbox="0 0 500 500" width="100%" >
    <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>
    <image id="img-1" class='svg-image' width="500" height="500" xlink:href="https://www.rmit.edu.au/content/dam/rmit/images/footer-artwork.jpg" preserveAspectRatio="xMinYMin slice" />
</svg>
</div>

CSS

body{
 background-color: lt-grey;
}

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


#img-1{
margin-left: 10px;
padding-right: 100px;
  position: relative;
top: -100px;

}

svg{
  padding-left: 10px;
    position:  absolute;

}