将 svg 元素转换为图像

Convert svg-element to image

本文关键字:图像 转换 元素 svg      更新时间:2023-09-26

我有一个HTML SVG元素(不是canvas),必须将内容保存到图像文件(PNG或JPG)。

有什么解决方案吗?

canvas.toDataURL() 不起作用,因为它是一个 svg 元素。

例:

<svg:svg id ="svg">
         <svg:svg width="{width}" height="{height}">
            <svg:circle cx="{cx}" cy="{cy}" r="{radius}" id="circ" fill="white" stroke="black" stroke-width="2" />
            <svg:text x="{tposW}" y="30" line="0" text-anchor="middle">{VORNAME}</svg:text>
            <svg:text x="{tposW}" y="44" line="1" text-anchor="middle">{NAME}</svg:text>
            <svg:text x="{tposW}" y="58" line="2" text-anchor="middle">{GEB}</svg:text>
        </svg:svg>
</svg:svg>

请只发布解决方案而不使用 jQuery。

使用 canvg JavaScript 库使用 Canvas 渲染 SVG 图像:http://code.google.com/p/canvg/

,然后使用canvas.toDataURL()