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.
Error Message & Stack Trace
No runtime exception in many cases.
Observed symptom is incorrect rendering: clip-path is not applied in exported image.
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:
clip-path="url(...)")style="clip-path: url(...)")Possible Solution
Normalize clip-path URL values during clone/decorate:
url(...)clip-path valuesurl(#id)Apply this normalization for attribute and inline style.
Steps To Reproduce
<clipPath id="clip1">...</clipPath>.url('/context.html#clip1')) via CSS, inline style, or SVG attribute.toPng/toSvg).Error Message & Stack Trace