Skip to content

Clip-path URLs with absolute same-document references break in exported images #579

@cedricbla

Description

@cedricbla

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions