JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg-1" class="clip-svg">
    <image id="img-1" class='svg-image' width="300" height="300" xlink:href="https://voxidmusic.com/img/start-bg-farbspray.jpg" />
    <rect class='svg-describe' width="300" height="300" fill="#000" />
</svg>

<svg id="svg-defs">
    <defs>
        <clipPath id="clip-triangle">
            <polygon points="0, 200 100, 0 200, 200" />
        </clipPath>
    </defs>
</svg>

CSS

body {
    background-color: #ddd;
    color: #fff;
}
.svg-describe, .svg-image {
    clip-path: url(#clip-triangle);
}
.svg-describe {
    opacity: 0;
    transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    -webkit-transition: all 0.5s ease 0.2s;
}
.clip-svg .svg-describe:hover {
    opacity: 1;
}
#img-1 {
    display: block;
    margin: auto;
}

JavaScript

// alert( $("#img-1").attr('xlink:href'));