OJyZMoJ
<div id="app">
<svg viewbox="0 0 300 300" width="300" height="300">
<circle r=50 cx=150 cy=150 @click="active = !active" :class="{'active': active}"></circle>
</svg>
</div>
new Vue({
el: "#app",
data: {
active: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
circle{
fill: #333;
transition: all 0.4s cubic-bezier(.96,.04,.04,.96);
stroke: rgb(119, 0, 255);
stroke-width: 1px;
}
.active{
fill: white;
stroke-width: 50px;
}