将编辑的 SVG 文件另存为新文件或数据库

Question

我不需要经常提问，但这次 Google 让我失望了

所以我有一个使用 Javascript 来编辑外部 SVG 文件的网站，如下所示：

<embed id="svgFile" src="svgFile.svg" type="image/svg+xml" />

我有一个带有输入的表单，可以使用 Javascript 和 Jquery 即时编辑 SVG，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="JavascriptFile.js"></script>

....HTML....

<input id="txt1" name="text_one" maxlength="16" type="text" class="text" placeholder="Line one" onkeyup="update(1)" />

javascript 是这样的：

function update(n) {var txtID = n;
var txt = document.getElementById("txt" + txtID).value;
var svgTXT = document.getElementById("svgFile").getSVGDocument().getElementById("txt" + txtID);
svgTXT.textContent = txt;
}

现在一切正常，页面上的“图像”/SVG 更新，但现在我需要保存更新后的图像。
新我不确切知道我们需要什么文件格式，但将信息保存到 php/MySQL DB 和 PDF 是最低要求。 PDF 是供用户保存和打印的……他们想做什么，而 DB 是用于在线保存。

我也将 JQuery 链接到该站点，但我发现 Javascript 更自然地编写代码，以太方式我需要某种解决方案/示例/插件。谁能帮忙！？

Answer 1

我通过在 php 和 mySQL 数据库中使用以下代码段来完成此操作： 首先，请记住 svg 基本上存储在文本中，就像 HTML 一样。而 svg 标签，无论是不同的标签，其布局都与 HTML 标签非常相似。

存储到数据库中。您必须在实际的 mySQL Insertcall 中使用以下代码段。我发现如果您先对变量执行此操作，然后将变量放入插入调用中，它将不起作用。该函数必须在 mySQL 语句中。
mysql_real_escape_string($myValue)

检索到文本框中的值。假设您的值已经从数据库中检索到，并且现在位于名为 theValues 的数组中。基本上我正在删除任何反斜杠，但在此之前我要确保它可以使用 htmlentities 正确显示。由于您在 svg 中没有反斜杠，我知道它修复了服务器用 \" 替换引号的位置。如果您在 svg 中遇到一些反斜杠，您只需要在替换函数中更聪明一点。
@ 987654322@

回显到页面的原因与上述相同，但 htmlentities 功能使其仅显示 svg 的文本，而不是处理 svg 并显示您的图片。这只是在文本存储在数据库中后显示 svg 时需要的，但它不会损害您的显示如果不是第一个数据，只是一个不必要的函数调用。
str_replace("\\", "",$myValue)

Answer 2

另存为 SVG

使用XMLSerializer 获取您的 SVG 的源 XML 表示，并将其发布回您的服务器（如果您愿意，可以使用 AJAX）。

另存为 PNG

使用XMLSerializer 为您的SVG 创建一个data URI，并将其用作<img> 元素的源。将此图像绘制到 HTML5 画布上，然后使用 toDataURL() 将内容转换为 base64 编码的 PNG 数据 URI，然后您可以将其发布到您的服务器并保存为文件。

警告：Chrome 的当前版本和 Firefox 的半新版本（但不是最新版本）目前在安全性上“强调”并在您绘制任何 SVG 时污染画布，从而阻止您获取数据 URI。

注意：以上两个答案都需要 IE9+；但是，对于 SVG 也是如此。