Clip-path URLs with absolute same-document references break in exported images
Author: cedricblaCreated Apr 1, 2026Updated Apr 1, 2026
Labelsbug
Expected Behavior
When exporting SVG/HTML content with html-to-image, clip-path references that point to the same document using absolute URLs should continue to work after DOM cloning.
Examples that should behave equivalently in export output:
url("https://current-host/context.html#clip1")url("/context.html#clip1")url("#clip1")
All of these should resolve to the local cloned definition (effectively url(#clip1)).
Current Behavior
During export, absolute same-document clip-path URLs are not consistently resolved in the cloned tree.
As a result, clipping is lost or elements disappear in the generated image.
This affects clip-path when defined via:
- SVG presentation attribute (
clip-path="url(...)") - Inline style (
style="clip-path: url(...)")
Possible Solution
Normalize clip-path URL values during clone/decorate:
- Detect
url(...)clip-path values - If URL points to current document with hash fragment, rewrite to local fragment form
url(#id) - Keep external references unchanged
Apply this normalization for attribute and inline style.
Steps To Reproduce
- Create an SVG with
<clipPath id="clip1">...</clipPath>. - Apply clip-path with absolute same-document URL (for example
url('/context.html#clip1')) via CSS, inline style, or SVG attribute. - Export the node with html-to-image (
toPng/toSvg). - Compare output with browser rendering of original DOM.
No runtime exception in many cases.
Observed symptom is incorrect rendering: clip-path is not applied in exported image.Source: bubkoo/html-to-image