SVG tasto cliccabile

by Salvatore Rotondo

HTML

<svg width="200" height="200">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="220" height="220">
            <image xlink:href="https://pbs.twimg.com/profile_images/1261051099/mrw_twitter.png" x="5" y="5" width="100" height="100" />
        </pattern>
    </defs>
    <path id="square" stroke="blue" d="M5,5 l0,100 l100,0 l0,-100 l-100,0"  fill="url(#img1)" />
    <polygon style="opacity:0.5" id="apoly" points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

JavaScript

document.getElementById('square').onclick = function() { 
    window.open('http://forum.mrwebmaster.it');  
};

document.getElementById('apoly').onmouseover = function() { 
    this.style.opacity = '1';
};

document.getElementById('apoly').onmouseout = function() { 
    this.style.opacity = '0.5';
};