NEW285420
Outline not rendered correctly for inline SVG 
https://bugs.webkit.org/show_bug.cgi?id=285420
Summary Outline not rendered correctly for inline SVG
net
Reported 2025-01-06 04:28:19 PST
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.
Attachments
Test case (1.13 KB, text/html)
2025-05-15 18:39 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-01-13 04:29:13 PST
<rdar://problem/142807293>
Simon Fraser (smfr)
Comment 2 2025-05-15 18:39:11 PDT
Created attachment 475257 [details] Test case
Note You need to log in before you can comment on or make changes to this bug.