diff --git a/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte b/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte index f2744694..39a7306d 100644 --- a/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte +++ b/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte @@ -32,6 +32,7 @@ >

A title

A paragraph of text...

+

Something that will not be included in the downloaded image.

diff --git a/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.svelte b/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.svelte index 9904bf95..409f6727 100644 --- a/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.svelte +++ b/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.svelte @@ -3,7 +3,12 @@ * * **Note**: This will not convert a non svg element into an svg, but will download an existing svg element as an svg file. * - * To ignore elements apply a data attribute "data-capture-ignore" and they will not be included in the download + * To hide elements, apply the attribute `data-capture-ignore` and they will not be included in the downloaded image. + * Note that this will not work for elements within an SVG (e.g., ``, ``, ``). + * To hide only part of an SVG, separate the content into two SVG elements, and superimpose them by + * placing them inside a div and applying the classes `absolute inset-0 pointer-events-none` to the second. + * You can then place the SVG that should be hidden into an SVG with the `data-capture-ignore` attribute applied. + * * @component */