feat: 1.0.2

xiashui1994 · Dec 6, 2023 · 5ea247b · 5ea247b
1 parent 86df9bd
commit 5ea247b
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 1.0.2 - 2023-12-06
+
+### Bug Fixes
+
+* use xlink:href additionally to href in img
+
+
 ## 1.0.1 - 2023-12-06
 
 ### Features

diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ pnpm/npm/yarn i dom2svg
 ## Usage
 
 ```js
-import { documentToSVG, elementToSVG, inlineResources, formatXML } from 'dom2svg'
+import { documentToSVG, elementToSVG, formatXML, inlineResources } from 'dom2svg'
 
 // Capture the whole document
 const svgDocument = documentToSVG(document)

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -30,7 +30,7 @@ pnpm/npm/yarn i dom2svg
 ## 使用
 
 ```js
-import { documentToSVG, elementToSVG, inlineResources, formatXML } from 'dom2svg'
+import { documentToSVG, elementToSVG, formatXML, inlineResources } from 'dom2svg'
 
 // 捕获整个文档
 const svgDocument = documentToSVG(document)

diff --git a/lib/inline.ts b/lib/inline.ts
@@ -23,8 +23,10 @@ export async function inlineResources(element: Element): Promise<void> {
     ...[...element.children].map(inlineResources),
     (async () => {
       if (isSVGImageElement(element)) {
-        const blob = await withTimeout(10000, `Timeout fetching ${element.href.baseVal}`, () =>
-          fetchResource(element.href.baseVal),
+        const elementHref = element.getAttribute('href') || element.getAttribute('xlink:href')
+        assert(elementHref, 'Expected <image> element to have an href or xlink:href attribute')
+        const blob = await withTimeout(10000, `Timeout fetching ${elementHref}`, () =>
+          fetchResource(elementHref),
         )
         if (blob.type === 'image/svg+xml') {
           // If the image is an SVG, inline it into the output SVG.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dom2svg",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Take SVG screenshots of DOM elements",
   "author": "xiashui",
   "license": "MIT",

diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
 import './style.css'
-import { elementToSVG } from '../lib/index'
+import { elementToSVG, inlineResources } from '../lib/index'
 import typescriptLogo from './typescript.svg'
 import viteLogo from './vite.svg'
 
@@ -19,9 +19,17 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   </div>
 `
 
-document.querySelector('#export')?.addEventListener('click', () => {
+document.querySelector('#export')?.addEventListener('click', async () => {
   const svg = elementToSVG(document.querySelector('body')!)
-  const svgString = new XMLSerializer().serializeToString(svg)
+  const svgRootElement = svg.documentElement
+  document.querySelector('body')!.prepend(svgRootElement)
+  try {
+    await inlineResources(svgRootElement)
+  }
+  finally {
+    svgRootElement.remove()
+  }
+  const svgString = new XMLSerializer().serializeToString(svgRootElement)
   const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' })
   window.open(URL.createObjectURL(blob))
 })