SVG截取div尺寸边框异常及自定义元素优化需求技术问询

问题背景 #

使用SVG截取元素时，截图尺寸与边框显示不符合预期，需实现以下优化：

• 自定义元素无需内部嵌套div；
• 生成的图片尺寸与原元素完全一致；
• 底部边框正常显示；
• 确保元素内的样式可正常生效。

因html2canvas会丢失部分元素，故采用SVG实现截图功能。

优化后完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        class CaptureElement extends HTMLElement {
            constructor() {
                super();
                // 给自定义元素设置基础布局样式
                this.style.display = "block";
                this.style.boxSizing = "border-box";
            }

            capture() {
                const targetElement = this;
                // 获取元素实际渲染的宽高（包含边框）
                const rect = targetElement.getBoundingClientRect();
                const width = rect.width;
                const height = rect.height;

                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                
                // 序列化自定义元素的完整内容（含内部样式）
                const data = new XMLSerializer().serializeToString(targetElement);
                
                // 构建带正确命名空间的SVG
                const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
                                <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
                                    ${data}
                                </foreignObject>
                             </svg>`;
                const img = new Image();
                img.onload = () => {
                    canvas.width = width;
                    canvas.height = height;
                    context.drawImage(img, 0, 0);
                    const base64 = canvas.toDataURL("image/png");
                    console.log(base64);

                    if (this.hasAttribute("download")) {
                        let filename = this.getAttribute("download");
                        if (!filename.endsWith(".png")) {
                            filename += ".png";
                        }
                        const a = document.createElement('a');
                        a.href = base64;
                        a.download = filename;
                        a.click();
                    }
                };
                img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
            }
        }

        customElements.define("capture-element", CaptureElement);
        document.addEventListener("DOMContentLoaded", () => {
            document.querySelector("button").addEventListener("click", () => {
                document.querySelector("capture-element").capture();
            })
        });
    </script>
    <style>
        button {
            color: white;
            background-color: gray;
            border-radius: 5px;
        }

        div.button {
            text-align: center;
        }
    </style>
    <title>Custom element</title>
</head>

<body>
    <div class="button">
        <button>Download</button>
    </div>
    <br>
    <br>
    <capture-element download="Certification.png" style="width: 50%; min-width: 500px; max-width: 1000px; margin: auto; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-bottom: 2px solid black; border-radius: 0px;">
        <style>
            * {
                border: 0px;
                background-color: white;
                font-family: "Arial";
            }

            h1 {
                background: linear-gradient(to right bottom, rgba(255, 188, 13, 1) 23%, rgba(0, 212, 255, 1));
                font-weight: lighter;
                color: transparent;
                background-clip: text;
                text-align: center;
            }

            p {
                margin-left: 5px;
            }

            .uname {
                color: transparent;
                font-weight: bolder;
                font-size: xx-large;
                text-align: center;
                margin-top: 0px;
                background: linear-gradient(to right bottom, rgb(132, 160, 68) 23%, rgb(66, 171, 192));
                background-clip: text;
            }

            .fname {
                font-weight: bold;
                font-size: x-large;
                text-align: center;
                margin-right: 150px;
                margin-top: 0px;
            }

            div {
                text-align: center;
            }
        </style>
        <h1>Digital certification</h1>
        <p>This certification is made for developers, from developers. This one is specially made for:</p>
        <p class="uname">Username</p>
        <p>From:</p>
        <p class="fname">HTML, CSS, JavaScript</p>
        <div>
            <ruby><meter style="font-size: xx-large;" min="0" max="100" low="33" high="66" optimum="80"></meter>
                <rt style="font-size: larger;">0%</rt>
            </ruby>
        </div>
    </capture-element>
</body>

</html>

优化细节说明 #

1. 移除内部嵌套div

   • 直接将<capture-element>作为目标容器，把原div的宽高、边框等样式直接应用到自定义元素上
   • 在自定义元素的constructor中设置display: block和box-sizing: border-box，确保它具备div的布局特性

2. 匹配原元素尺寸

   • 使用getBoundingClientRect()获取元素实际渲染的宽高（包含边框），替代原代码的scrollWidth/scrollHeight，避免尺寸计算偏差
   • SVG和canvas都采用该实际宽高，保证截图尺寸与原元素完全一致

3. 修复底部边框显示

   • 删除原代码中临时添加的<br>元素，该元素会导致元素高度计算异常，进而截断底部边框
   • 给foreignObject添加XHTML命名空间，确保内容渲染正常

4. 确保内部样式生效

   • 保留自定义元素内的<style>标签，序列化时会完整包含这些样式
   • SVG的foreignObject指定xmlns="http://www.w3.org/1999/xhtml"，保证内部HTML和样式能被正确解析渲染

内容的提问来源于stack exchange，提问作者Hamza Elashry