You can nest elements of an svg
using <g>
:
<svg viewbox='0 0 80 80'>
<g id=button>
<polygon points='50,0 80,80 0,80'/>
<text x=40 y=50>HELLO</text>
</g>
</svg>
and then apply css styling:
#button {
cursor: pointer;
fill: #900;
}
#button:hover {
cursor: pointer;
fill: #F00;
}
text {
font-size:7px;
fill: black;
}