导出内联 svg 对象（IE 问题）答案

【问题标题】：Export inline svg-object (IE issue)导出内联 svg 对象（IE 问题）
【发布时间】：2014-07-12 00:14:42
【问题描述】：

核心问题：

我正在尝试使用 JavaScript 获取 SVG-Inline-Object 并将其发送到输出代表给定 SVG-Object 的服务器。

在 Chrome 和 FF 中一切正常，但 IE (>= 9) 将 SVG-Object 的给定字符串剪切到任何地方，因此发送到服务器的字符串不完整，最终导致错误。

我目前的流程：

html

<html>
<head></head>
    <body>
        <div>
            <svg>(expect a correctly generated svg-object here - works fine)</svg>
            <a href='#export'>export</a>
            <!-- click on this link triggers the javascript-function !-->
        </div>
    </body>
</html>

javascript（通过点击“导出”链接触发）

var $svg = $(this).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("/Results/saveSVG/", // saveSVG => store SVG-Data in Session
    { "svg" : svgContent }).done(function(data) {
    window.open("/Results/getSVG/svg.php");
});

/Results/saveSVG/（一个 PHP 文件）

$_SESSION["svg"] = $_POST["svg"]; // similar to something like this (works fine)

svg.php（在 Chrome / FF 中像魅力一样工作

header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;

在 Chrome / FF 中会发生什么？

svgContent-变量： <svg>...</svg>
服务器接收到的svgContent-variable (/Results/saveSVG/)
/Results/getSVG/svg.php 上的输出是完美的 SVG 文件

在 IE 中会发生什么？

svgContent-variable 在某处被裁剪： <svg>..
服务器收到无效的 svgContent-variable (/Results/saveSVG/)
/Results/getSVG/svg.php 上的输出未呈现

IE 中的调试信息

svgContent-variable: (Javascript)

完全存储在 Session 中的相同变量
SVG 的输出被剪切：

结论

上述概念在 chrome 和 ff 中运行良好，但在所有测试的 IE 版本 (9 / 10 / 11) 上都失败

我还尝试将值添加到隐藏的文本区域并将表单发送到 svg.php（效果相同 / Chrome 和 FF - 好的 / IE 失败）。

在 $.post-Request 中我有什么需要调整的吗，或者还有其他概念可以导出内联 SVG 对象吗？

解决方案（感谢 timclutton - answer）

由于在开始标记中双重定义xmlns-attributes 导致的问题。因为我对创建 svg-object 的方法没有影响，所以一个简单的str_replace 完成了这项工作：

svg.php

<?
session_start();
header("Content-type: image/svg+xml");
echo str_replace("xmlns=\"http://www.w3.org/2000/svg\" xmlns:NS1=\"\" NS1:xmlns:xlink=\"http://www.w3.org/1999/xlink\"","",$_SESSION["svg"]);
?>

【问题讨论】：

您需要更清楚问题是什么——“在任何地方切断字符串”是什么意思？代码“失败”是什么意思？我们无法帮助调试一个不清楚的问题。
我会更新我的问题以更清楚。
你能不能也给我们一个 $_SESSION["svg"] 值的例子？
谢谢，@godesign。一旦细节更加充实，我会尽力帮助弄清楚！
@Filo 感谢您的快速反馈，我已尝试在出现问题的地方复制一些原始数据。（大部分都是相当敏感的数据，所以我只好找一些不重要的宣传）

标签： javascript php internet-explorer svg

【解决方案1】：

我已根据您发布的代码（稍作改动）构建了以下代码，这适用于我在 Win8.1 x64 上的 IE11 和 FF30 中。也许尝试将这两个文件放在一个文件夹中（使用 jQuery，或将 src 更改为 CDN），看看它是否适合您。

文件 svg.php：

<?php
session_start();

if ($_POST) {
    $_SESSION['svg'] = $_POST['svg'];
    exit;
}

?>

<html>
    <head>
        <title>blah</title>
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            function svg(e) {
                var $svg = $(e).parent().find("svg"); // works fine
                var s = new XMLSerializer();
                var svgContent = s.serializeToString($svg[0]);
                $.post("svg.php", // saveSVG => store SVG-Data in Session
                    { "svg" : svgContent }).done(function(data) {
                    window.open("svg2.php");
                });
            }
        </script>
    </head>
    <body>
        <div>
            <svg>
                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            </svg>
            <a href='#export' onclick="svg(this)">export</a>
            <!-- click on this link triggers the javascript-function !-->
        </div>
    </body>
</html>

文件 svg2.php：

<?php
session_start();
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
?>

实际 SVG 内容的更新

问题似乎出在开始标签上。将其从...更改为...

<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

...到...

<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" version="1.1">

...使它与我上面发布的代码一起工作。

更新 2

通过W3C Validator 运行 SVG 代码会显示错误。使用我在上面发布的修改后的开始标签验证成功。

总之，问题在于无效的 XML。

【讨论】：

这几乎就是我的做法。我在我的问题中复制了一个不敏感的 SVG 文件示例，出现问题。
很好奇。在我的页面中使用您的 header("Content-type: image/svg+xml"); 会导致正确的渲染。也许这是一个不正确的内容类型？
我更新了我的帖子，更改了您的 SVG 代码。
是的！你说对了。非常感谢您的验证提示。我什至它不是很漂亮，但我只是在回显$_SESSION['svg'] 之前替换了打开的svg-tag 中的无效部分。这现在工作正常。你的努力真的值得（在 20 小时内）
太好了，很高兴我能帮上忙。修复看起来很难看，但如果你不控制 SVG 代码生成，那么至少你找到了一个可行的解决方案！

【解决方案2】：

也许它不相关，但你试过吗？

header("Content-type: image/svg+xml");

echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' .$_SESSION["svg"];

（摘自https://stackoverflow.com/a/1623265/3625883）

【讨论】：