我的 HTML5 Canvas 代码可以转换为 SVG 吗？答案

【问题标题】：Can my HTML5 Canvas code be converted to SVG?我的 HTML5 Canvas 代码可以转换为 SVG 吗？
【发布时间】：2023-03-31 15:15:01
【问题描述】：

我有以下示例代码：

    function drawCanvas() {
        var canvas = document.getElementById("logoText");
        var c = canvas.getContext('2d');
        c.lineWidth = 1;
        c.lineStyle = "#FFFFFF";
        c.fillRect(10, 10, 150, 40);
        c.fillStyle = "#FFFFFF";
        c.font = "22px 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif"
        c.fillText("Test", 20, 45);
        hexstring1 = "\u2610";
        c.fillText(hexstring1, 20, 70);
    }

如果我假设使用同时支持 SVG 和 Canvas 的浏览器，那么我该如何将此代码转换为使用 SVG。

另外，在 Canvas 上使用 SVG 有什么优势或劣势？

【问题讨论】：

另见stackoverflow.com/questions/8571294/…和stackoverflow.com/questions/6918597/…

标签： jquery html canvas svg html5-canvas

【解决方案1】：

SVG 是基于标签的，就像 HTML 本身一样。因此，您必须在 SVG 标记内插入 DOM 节点。您的示例大致翻译为以下代码。

您可以像任何其他节点一样在 JavaScript 中创建它，但请确保使用 document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' ); 而不是通常的 document.createElement( 'div' ); 插入节点。

<svg xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewbox="0 0 100 100">
  <rect x="10" y="10" width="150" height="40" style="stroke: #FFFFFF; stroke-width: 1px" />
  <text x="20" y="45" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">Test</text>
  <text x="20" y="70" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">&#9744;</text>

</svg>

与画布相比，使用 SVG 有两个优点：

您的图像缩放得更好。如果放大图像，伪影会少得多。
您可以使您的元素“可点击”。将与 HTML 中相同的事件附加到 SVG 中的任何元素。例如，您可以使用 SVG 制作某种自定义按钮，附加点击处理程序并将其用作提交按钮。

【讨论】：

【解决方案2】：

您不能直接从画布转换为 svg。您可以将画布绘图命令存储在堆栈中，然后您可以生成路径数据字符串，或使用 DOM 接口。路径数据结构看here

【讨论】：

对不起。我所说的转换只是在 SVG 中重新编码。可能我解释的不是很好。
这是个好主意，请使用这个库：jonobr1.github.io/two.js
@michelpm 看起来是一个不错的库，因为统一 api 可能会很麻烦。另一方面，我几乎总是只使用其中一种技术，因此处理一个 API 就足够了……