# 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.
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).
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!
<rdar://problem/97642031>
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