285420 2025-01-06 04:28:19 -0800 Outline not rendered correctly for inline SVG 2025-05-15 18:39:11 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 18 Mac (Apple Silicon) macOS 14 NEW https://jsfiddle.net/h2opt0L5/ InRadar P2 Normal --- 1 net webkit-unassigned ahmad.saleem792 bfulgham karlcow simon.fraser webkit-bug-importer zalan oldest_to_newest 2085018 0 net 2025-01-06 04:28:19 -0800 I tried to add an outline to inline SVG illustrations with the following code: ``` <html> <head> <style> body { display: flex; flex-direction: column; align-items: center; & > * { width: 75vw; max-width: 400px; } } figure { display: block; height: auto; max-width: 50%; margin: 10px auto 10px auto; &:active { max-width: 150%; margin: 10px -50px 10px -50px; } & svg { display: block; height: auto; width: 50%; max-width: 50%; margin: 0 auto 0 auto; &:hover { outline: 2px black outset; outline-offset: 2px; } &:active { outline: none; } } } </style> <title> </title> </head> <body> <figure> <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red"></rect> <circle cx="150" cy="100" r="80" fill="green"></circle> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white"> SVG </text></svg> </figure> </body> </html> ``` The outline does not appear on hovering, but only after clicking the SVG, and then remains visible even when the mouse pointer is moved away. Both Firefox und Chrome render the outline correctly. 2086721 1 webkit-bug-importer 2025-01-13 04:29:13 -0800 <rdar://problem/142807293> 2117513 2 475257 simon.fraser 2025-05-15 18:39:11 -0700 Created attachment 475257 Test case 475257 2025-05-15 18:39:11 -0700 2025-05-15 18:39:11 -0700 Test case svg-outline.html text/html 1161 simon.fraser PGh0bWw+CjxoZWFkPgogIDxzdHlsZT4KICBib2R5IHsKICAgICAgICBkaXNwbGF5OiBmbGV4Owog ICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRl cjsKICAgICAgICAmID4gKiB7CiAgICAgICAgICAgICAgICB3aWR0aDogNzV2dzsKICAgICAgICAg ICAgICAgIG1heC13aWR0aDogNDAwcHg7CiAgICAgICAgfQogIH0KICBmaWd1cmUgewogICAgICAg IGRpc3BsYXk6IGJsb2NrOwogICAgICAgIGhlaWdodDogYXV0bzsKICAgICAgICBtYXgtd2lkdGg6 IDUwJTsKICAgICAgICBtYXJnaW46IDEwcHggYXV0byAxMHB4IGF1dG87CiAgICAgICAgJjphY3Rp dmUgewogICAgICAgICAgICAgICAgbWF4LXdpZHRoOiAxNTAlOwogICAgICAgICAgICAgICAgbWFy Z2luOiAxMHB4IC01MHB4IDEwcHggLTUwcHg7CiAgICAgICAgfQogICAgICAgICYgc3ZnIHsKICAg ICAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrOwogICAgICAgICAgICAgICAgaGVpZ2h0OiBhdXRv OwogICAgICAgICAgICAgICAgd2lkdGg6IDUwJTsKICAgICAgICBtYXgtd2lkdGg6IDUwJTsKICAg ICAgICBtYXJnaW46IDAgYXV0byAwIGF1dG87CiAgICAgICAgJjpob3ZlciB7CiAgICAgICAgICAg ICAgICBvdXRsaW5lOiAycHggYmxhY2sgb3V0c2V0OwogICAgICAgICAgICAgICAgb3V0bGluZS1v ZmZzZXQ6IDJweDsKICAgICAgICB9CiAgICAgICAgJjphY3RpdmUgeyBvdXRsaW5lOiBub25lOyB9 CiAgICB9CiAgfQogIDwvc3R5bGU+CiAgPHRpdGxlPgogIDwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+ CiAgPGZpZ3VyZT4KICAgIDxzdmcgdmVyc2lvbj0iMS4xIiBiYXNlcHJvZmlsZT0iZnVsbCIgd2lk dGg9IjMwMCIgaGVpZ2h0PSIyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ CiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZWQiPjwvcmVjdD4K ICAgIDxjaXJjbGUgY3g9IjE1MCIgY3k9IjEwMCIgcj0iODAiIGZpbGw9ImdyZWVuIj48L2NpcmNs ZT4KICAgIDx0ZXh0IHg9IjE1MCIgeT0iMTI1IiBmb250LXNpemU9IjYwIiB0ZXh0LWFuY2hvcj0i bWlkZGxlIiBmaWxsPSJ3aGl0ZSI+CiAgICAgIFNWRwogICAgPC90ZXh0Pjwvc3ZnPgogIDwvZmln dXJlPgo8L2JvZHk+CjwvaHRtbD4K