<style>
text::selection{
    color: blue;
}
</style>
<script>
window.addEventListener("load", function () {
    var range = document.createRange();
    var selection = document.getSelection()
    range.setStart(m1, 0);
    range.setEnd(id1, id1.childNodes.length);
    selection.addRange(range);
}, false);
</script>
<body>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="m1" x="0" y="0" width="200" height="200">
   <circle cx="100" cy="100" r="20" fill="white"/>
   <text y="100" fill="white" font-size="50">
    Text
   </text>
  </mask>
 </defs>
 <rect id="id1" mask="url(#m1)" x="10" y="10" width="180" height="180"/>
</svg>