JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg-1" class="clip-svg" width="150" height="150">
	    <a xlink:href="http://google.com" class="svg-link">
		    <image id="img-1" class="svg-image" width="150" height="150" x="0" y="0" xlink:href="http://lorempixel.com/output/city-q-c-150-150-10.jpg" />
		   
		    <defs>
		        <clipPath id="clip-triangle">
		            <polygon points="0,0 75,75 150,150 0,150" />
		        </clipPath>
		    </defs>

		    <defs>
		        <clipPath id="clip-square">
		            <polygon points="0,0 0,150 150, 150 150, 0" />
		        </clipPath>
		    </defs>
	    </a>
	</svg>

CSS

.svg-image, .svg-link {
    clip-path: url(#clip-triangle);
}

.svg-image:hover, .svg-link:hover {
    clip-path: url(#clip-square);
}

.svg-image,
.svg-link {
    transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    -webkit-transition: all 0.5s ease 0.2s;
}

#img-1 {
    display: block;
    margin: auto;
}