From 86df9bdcc50bc91036dd1fdf64ec01447f0f42bb Mon Sep 17 00:00:00 2001 From: lijunchang Date: Wed, 6 Dec 2023 13:51:56 +0800 Subject: [PATCH] feat: 1.0.1 --- CHANGELOG.md | 16 +++++++++++++ README.md | 35 ++++++++++++++++++++-------- README.zh-CN.md | 62 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 4 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 README.zh-CN.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..92e4ef9 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,16 @@ +## 1.0.1 - 2023-12-06 + +### Features + +* Update document + + +## 1.0.0 - 2023-12-06 + +### Features + +* Refactor dom-to-svg + +### Bug Fixes + +* Safari returns 2 DOMRects when wrapping text. \ No newline at end of file diff --git a/README.md b/README.md index deb483c..6dde19c 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,31 @@ -# DOM to SVG +

dom2svg

-[![npm](https://img.shields.io/npm/v/dom2svg)](https://www.npmjs.com/package/dom2svg) -[![CI status](https://github.com/felixfbecker/dom2svg/workflows/test/badge.svg?branch=main)](https://github.com/felixfbecker/dom2svg/actions) -![license: MIT](https://img.shields.io/npm/l/dom2svg) -[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) +

+ + Version + + + Downloads + + + Issues + + + License + +

-Library to convert a given HTML DOM node into an accessible SVG "screenshot". +

Library to convert a given HTML DOM node into an accessible SVG "screenshot".

-## Demo 📸 +

Fork from dom-to-svg

-Try out the [SVG Screenshots Chrome extension](https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg) which uses this library to allow you to take SVG screenshots of any webpage. -You can find the source code at [github.com/felixfbecker/svg-screenshots](https://github.com/felixfbecker/svg-screenshots). +

English | 简体中文

+ +## Install + +```sh +pnpm/npm/yarn i dom2svg +``` ## Usage @@ -44,4 +59,4 @@ The output can be used as-is as valid SVG or easily passed to other packages to ## Caveats -- Designed to run in the browser. Using JSDOM on the server will likely not work, but it can easily run inside Puppeteer. +- Designed to run in the browser. Using JSDOM on the server will likely not work, but it can easily run inside Puppeteer. \ No newline at end of file diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..5cad6cb --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,62 @@ +

dom2svg

+ +

+ + Version + + + Downloads + + + Issues + + + License + +

+ +

将给定的 HTML DOM 节点转换为可访问的 SVG "屏幕截图" 的库。

+ +

复刻自 dom-to-svg

+ +

English | 简体中文

+ +## 安装 + +```sh +pnpm/npm/yarn i dom2svg +``` + +## 使用 + +```js +import { documentToSVG, elementToSVG, inlineResources, formatXML } from 'dom2svg' + +// 捕获整个文档 +const svgDocument = documentToSVG(document) + +// 捕获指定元素 +const svgDocument = elementToSVG(document.querySelector('#my-element')) + +// 内联资源 +await inlineResources(svgDocument.documentElement) + +// 格式化输出 +const svgString = new XMLSerializer().serializeToString(svgDocument) +``` + +输出结果可以直接作为 SVG 使用，也可以给其他包进行美化或压缩处理。 + +## 特点 + +- 不依赖 `` - 输出的 SVG 在设计工具（如 Illustrator、Figma 等）中可以正常使用。 +- 使用了正确的 ARIA 属性对 SVG 进行注释，可访问 DOM 树。 +- 链接可以交互。 +- 文本内容可以复制到剪贴板。 +- 可以内联外部资源，如图像、字体等，SVG 文件自包含。 +- 元素的 CSS 层叠顺序不变。 +- 在 SVG 上输出调试属性，能够追溯元素的 DOM 节点。 + +## 注意 + +- 为浏览器开发的库，可以在浏览器中运行。在服务器上使用 JSDOM 可能无法正常使用，不过可以在 Puppeteer 中运行。 \ No newline at end of file diff --git a/package.json b/package.json index 1451ab8..65fd9d8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dom2svg", "type": "module", - "version": "1.0.0", + "version": "1.0.1", "description": "Take SVG screenshots of DOM elements", "author": "xiashui", "license": "MIT",