svg image experiment

by Richard Hunter

HTML

<div class="container">

<svg   
     id='foo'
     viewbox="0 0 150 100"
     width="600"
     height="400"
     
     >
    <image id="img-1"
           
           class="svg-image"
           width="150"
           height="100"
           x="0"
           y="0"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xlink:href="http://192.168.1.108:1314/images/home-page-consultant-image.jpg"
           ></image>
    <polygon points="0,0 75,100 0,100" style="fill:pink"/>

</svg>
</div>

CSS

.container {
    overflow : hidden;
   
}


svg {
    border : solid 1px black;
    width : 50%;
    height : auto;
    opacity : 1;
    transition : opacity 1s linear;

}
svg.active {

    opacity : 0;
}

JavaScript

var image = document.querySelector('#img-1');
var foo = document.querySelector('#foo');
foo.addEventListener('click', function () {
	this.classList.toggle('active');
});