better document how to exclude things from downloaded images (#810)

Greater-London-Authority · Jan 28, 2025 · 64a29f9 · 64a29f9
1 parent 30e9936
commit 64a29f9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte b/packages/ui/src/lib/imageDownloadButton/ImageDownloadButton.stories.svelte
@@ -32,6 +32,7 @@
 >
 	<h2 class="font-bold text-lg">A title</h2>
 	<p class="text-color-text-secondary" data-capture-ignore>A paragraph of text...</p>
+	<p data-capture-ignore>Something that will not be included in the downloaded image.</p>
 	<LogoByCiu class="w-80" />
 </div>
 

diff --git 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., `<rect>`, `<text>`, `<line>`).
+	 * 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
 	 */