1

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

所以我有一个使用 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 更自然地编写代码，以太方式我需要某种解决方案/示例/插件。谁能帮忙！？

4

2 回答 2

1

我通过在 php 和 mySQL 数据库中使用以下代码段来实现这一点： 首先，记住 svg 基本上存储在文本中，就像 HTML 一样。svg 标签，无论是不同的标签，都与 HTML 标签非常相似。

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

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

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

于 2013-11-27T15:51:25.767 回答
0

另存为 SVG

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

另存为 PNG

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

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

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

于 2012-06-20T12:54:56.910 回答