Bug 303432

Summary: foreignObject with clipPath and animation is not working properly
Product: WebKit Reporter: Karl Dubost <karlcow>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar, LayerBasedSVGEngine
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://vasilis.nl/dingen/echologo/gradient.svg
See Also: https://bugs.webkit.org/show_bug.cgi?id=23113
Attachments:
Description Flags
testcase
none
rendering in safari, firefox, chrome none

Karl Dubost
Reported 2025-12-02 16:03:25 PST
Created attachment 477590 [details] testcase Reported on https://social.vasilis.nl/@vasilis/115648628783058338 > Dearest SVG nerds, I’m trying to add an animated conic gradient to the background of this logo. I used a `foreignObject` for the gradient. It works fine in firefox and chrome, but as soon as I add a rotation or `position:absolute` to the `foreignObject` the `clipPath` disappears in safari. > > Any ideas on how I could fix this? The image will be served as the source of an image tag. I tried adding a rotation or positioning to the `clipPath` as well, but alas … I'm attaching the testcase.
Attachments
testcase (4.14 KB, image/svg+xml)
2025-12-02 16:03 PST, Karl Dubost 		no flags
Details
rendering in safari, firefox, chrome (336.12 KB, image/png)
2025-12-02 16:05 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2025-12-02 16:05:17 PST
Created attachment 477591 [details] rendering in safari, firefox, chrome
Simon Fraser (smfr)
Comment 2 2025-12-02 16:10:36 PST
This is the basic bug that LBSE is fixing.
Radar WebKit Bug Importer
Comment 3 2025-12-09 16:04:11 PST
<rdar://problem/166180705>
Note You need to log in before you can comment on or make changes to this bug.