187799 2018-07-19 05:28:53 -0700 SVG <a> with focus lacks visual indicator 2025-01-22 15:02:06 -0800 1 1 1 Unclassified WebKit SVG Safari 11 Unspecified Unspecified NEW InRadar P2 Normal --- 1 peter webkit-unassigned ahmad.saleem792 ap bfulgham jdiggs j.gerbes rniwa webkit-bug-importer zimmermann oldest_to_newest 1443336 0 peter 2018-07-19 05:28:53 -0700 # Reproduce * visit https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a * open the sample there * focus one of the links Expected result The link has some visual indication that it is in focus. # Actual result There is no visible indication that the link is in focus. # Notes * Also confirmed on WebKitGTK+ 2.20.3 * Defining a CSS outline has no effect * Chrome, Firefox, and Edge behave as expected * workaround: wrapping the <a>'s children in a <rect> and specifying stroke-related properties for a:focus>rect works. 1443378 1 peter 2018-07-19 09:32:07 -0700 As @joanie pointed out, the example on MDN includes some CSS which may be confusing. Those styles do not include anything for focus, but styles for hover and active instead (which are also not working in WebKit but everywhere else). 1886740 2 ahmad.saleem792 2022-07-26 04:16:50 -0700 I am able to reproduce this bug in Safari 15.6 on macOS 12.5, while going to MDN article and looking into loaded example, if you hover over <circle> anchor link, it does not show outline to highlight that it is link although cursor do change to show that it is link to click, while all in other browsers (Chrome Canary 106 and Firefox Nightly 104) it does. Just wanted to share updated testing results. Thanks! 1886975 3 webkit-bug-importer 2022-07-26 19:49:33 -0700 <rdar://problem/97642031> 1920294 4 ahmad.saleem792 2022-12-17 16:04:39 -0800 We need to update "svg.css" with following to fix this: /* As SVG does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* Necessary to select only SVG <a> elements, and not also HTML's. See warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* Even for text, SVG uses fill over color */ text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; } https://github.com/WebKit/WebKit/blob/c2dd7ba9890874670b16f914a46afb7c420da9ce/Source/WebCore/css/svg.css#L4 2089096 5 j.gerbes 2025-01-22 15:02:06 -0800 This bug is still present in WebKit 20621.1.9.111.1. The default `:focus` styles are being applied on focus, but it seems that `outline` is not rendered for `<a>` and `<svg>` elements within an `<svg>` element: <html> <head> <style> .outline { outline: 1px solid red; } </style> </head> <body> <h2>Outline on outer SVG element (rendered)</h2> <svg class="outline" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <circle cx="50" cy="50" r="35" /> </svg> <h2>Outline on circle element (rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <circle class="outline" cx="50" cy="50" r="35" /> </svg> <h2>Outline on anchor element (not rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <a class="outline" href="#"> <circle cx="50" cy="50" r="35" /> </a> </svg> <h2>Outline on inner SVG element (not rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <svg class="outline"> <circle cx="50" cy="50" r="35" /> </svg> </svg> </body> </html>