| <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" |
| style="writing-mode: vertical-rl"> |
| <style> |
| .ring { |
| outline: -webkit-focus-ring-color 5px auto; |
| } |
| </style> |
| |
| <circle cx="65" cy="60" r="50" fill="orange" class="ring" /> |
| <path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" /> |
| <g class="ring"> |
| <rect x="270" y="10" width="100" height="100" fill="orange" /> |
| </g> |
| |
| <g transform="translate(60, 140) rotate(30)"> |
| <rect width="100" height="100" fill="orange" class="ring" /> |
| </g> |
| <rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" /> |
| <g class="ring"> |
| <rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" /> |
| </g> |
| |
| <text x="10" y="320" class="ring">focused text</text> |
| <text transform="translate(100, 320) rotate(30)" class="ring">focused text</text> |
| <g class="ring"> |
| <text transform="translate(200, 320) rotate(30)" class="ring">focused text</text> |
| </g> |
| |
| <clipPath id="clip"> |
| <rect width="100" height="100" /> |
| </clipPath> |
| <image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" /> |
| <image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/> |
| <g class="ring" transform="translate(360, 400) rotate(30)"> |
| <image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/> |
| </g> |
| |
| </svg> |