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

  1. Create an SVG with <clipPath id="clip1">...</clipPath>.
  2. Apply clip-path with absolute same-document URL (for example url('/context.html#clip1')) via CSS, inline style, or SVG attribute.
  3. Export the node with html-to-image (toPng/toSvg).
  4. Compare output with browser rendering of original DOM.
Error Message & Stack Trace

txt
No runtime exception in many cases.
Observed symptom is incorrect rendering: clip-path is not applied in exported image.