Question

核心问题：

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

一切都在Chrome＆amp; FF但是IE（＆gt; = 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 （点击“导出”-Link）

触发

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-Versions（9/10/11）上都失败

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

我是否需要在$ .post-Request中调整任何内容，还是有其他概念来导出内联SVG对象？

解决方案（感谢timclutton - answer）

由于开头标记中的双重定义xmlns - 属性而导致的问题。因为我在创建svg-object的方法中没有ifluence，所以做了一个简单的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"]);
?>

Answer 1

我已经从您发布的代码（稍作修改）中构建了以下内容，这适用于Win11.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。

Answer 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）

导出内联svg-object（IE问题）