| <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> |