在php中打印包含svg元素的json数组

Question

我在获取用 javascript 构建的 json 字符串并将其发布到 php 页面以正确打印时遇到了一些困难。我使用了一个表单来发布数据并使用以下方式访问它：

$json = $_POST['printMatter'];

json 字符串如下所示：

[{"type":"page","value":"page3"},{"type":"row","value":"newrow13"},{"type":"rowTitle","value":"Demographics"},{"type":"chartTitle","value":"Percentage of respondents by sex"},{"type":"chartSVG","value":"<g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(31, 119, 180);" toggle="off" d="M2.4492935982947065e-15,-40A40,40 0 1,1 -26.947825745862282,-29.560356688826367L-11.228260727442619,-12.316815287010987A16.666666666666668,16.666666666666668 0 1,0 1.0205389992894611e-15,-16.666666666666668Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(10.235180541969331,26.420046499790082)">1 (N:15; 88.2%)</title></g><g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(255, 127, 14);" toggle="off" d="M-26.947825745862282,-29.560356688826367A40,40 0 0,1 -7.347880794884118e-15,-40L-3.061616997868383e-15,-16.666666666666668A16.666666666666668,16.666666666666668 0 0,0 -11.228260727442619,-12.316815287010987Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(-10.235180541969335,-26.420046499790082)">2 (N:2; 11.8%)</title></g><rect style="fill: rgb(31, 119, 180);" height="15" y="58" width="15" x="326.6666666666667" class="arc"></rect><rect style="fill: rgb(255, 127, 14);" height="15" y="75" width="15" x="326.6666666666667" class="arc"></rect><text style="font-size: 12px;" y="71" x="346.6666666666667">1</text><text style="font-size: 12px;" y="88" x="346.6666666666667">2</text>"},{"type":"chartTitle","value":"Percentage of respondents by age"},{"type":"chartSVG","value":"<g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(31, 119, 180);" toggle="off" d="M0,40A40,40 0 1,1 0,-40A40,40 0 1,1 0,40M0,16.666666666666668A16.666666666666668,16.666666666666668 0 1,0 0,-16.666666666666668A16.666666666666668,16.666666666666668 0 1,0 0,16.666666666666668Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(1.7349162987920838e-15,28.333333333333336)">2 (N:17; 100.0%)</title></g><rect style="fill: rgb(31, 119, 180);" height="15" y="66.5" width="15" x="326.6666666666667" class="arc"></rect><text style="font-size: 12px;" y="79.5" x="346.6666666666667">2</text>"},{"type":"chartTitle","value":"Percentage of respondents by education"},{"type":"chartSVG","value":"<g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(31, 119, 180);" toggle="off" d="M2.4492935982947065e-15,-40A40,40 0 1,1 -21.057286515094237,34.00868542918457L-8.773869381289266,14.170285595493569A16.666666666666668,16.666666666666668 0 1,0 1.0205389992894611e-15,-16.666666666666668Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(27.25172655656321,7.753784718709017)">2 (N:10; 58.8%)</title></g><g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(255, 127, 14);" toggle="off" d="M-21.057286515094237,34.00868542918457A40,40 0 0,1 -39.82936705180138,-3.6907343785320994L-16.59556960491724,-1.5378059910550417A16.666666666666668,16.666666666666668 0 0,0 -8.773869381289266,14.170285595493569Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(-25.362959921726773,12.629253413668577)">3 (N:3; 17.6%)</title></g><g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(44, 160, 44);" toggle="off" d="M-39.82936705180138,-3.6907343785320994A40,40 0 0,1 -26.947825745862282,-29.560356688826367L-11.228260727442619,-12.316815287010987A16.666666666666668,16.666666666666668 0 0,0 -16.59556960491724,-1.5378059910550417Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(-25.362959921726766,-12.629253413668595)">1 (N:2; 11.8%)</title></g><g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(214, 39, 40);" toggle="off" d="M-26.947825745862282,-29.560356688826367A40,40 0 0,1 -14.449666647486119,-37.298889176174235L-6.02069443645255,-15.541203823405931A16.666666666666668,16.666666666666668 0 0,0 -11.228260727442619,-12.316815287010987Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(-14.915577948191759,-24.089485512339063)">5 (N:1; 5.9%)</title></g><g transform="translate(168.33333333333334,75)" class="arc"><path style="fill: rgb(148, 103, 189);" toggle="off" d="M-14.449666647486119,-37.298889176174235A40,40 0 0,1 -7.347880794884118e-15,-40L-3.061616997868383e-15,-16.666666666666668A16.666666666666668,16.666666666666668 0 0,0 -6.02069443645255,-15.541203823405931Z"></path><title style="text-anchor: middle;" dy=".35em" transform="translate(-5.20623633813615,-27.850904491043888)">6 (N:1; 5.9%)</title></g><rect style="fill: rgb(31, 119, 180);" height="15" y="32.5" width="15" x="326.6666666666667" class="arc"></rect><rect style="fill: rgb(255, 127, 14);" height="15" y="49.5" width="15" x="326.6666666666667" class="arc"></rect><rect style="fill: rgb(44, 160, 44);" height="15" y="66.5" width="15" x="326.6666666666667" class="arc"></rect><rect style="fill: rgb(214, 39, 40);" height="15" y="83.5" width="15" x="326.6666666666667" class="arc"></rect><rect style="fill: rgb(148, 103, 189);" height="15" y="100.5" width="15" x="326.6666666666667" class="arc"></rect><text style="font-size: 12px;" y="45.5" x="346.6666666666667">2</text><text style="font-size: 12px;" y="62.5" x="346.6666666666667">3</text><text style="font-size: 12px;" y="79.5" x="346.6666666666667">1</text><text style="font-size: 12px;" y="96.5" x="346.6666666666667">5</text><text style="font-size: 12px;" y="113.5" x="346.6666666666667">6</text>"},{"type":"row","value":"newrow23"}]

我可以通过在 php 文件中创建一些 javascript 来看到这一点：

$blurb = "<script> 
  alert('" . $json . "'); 
</script>";
echo $blurb;

但是，当我尝试简单地回显 $json 如下：

echo $json;

结果是我在页面上显示了一些 $json，但其他位 - 主要是 json 字符串中的 SVG 代码最终以 html 代码的形式出现，而不是文本（即我可以在我的控制台/检查器）。

当我尝试使用 echo json_decode($json) 时，我只得到 'Array'

如果我这样做：

echo "<pre>";
echo print_r(json_decode($json));
echo "</pre>";

然后我得到如下所示的东西：

Array
(
[0] => stdClass Object
    (
        [type] => page
        [value] => page3
    )

[1] => stdClass Object
    (
        [type] => row
        [value] => newrow13
    )

[2] => stdClass Object
    (
        [type] => rowTitle
        [value] => Demographics
    )

[3] => stdClass Object
    (
        [type] => chartTitle
        [value] => Percentage of respondents by sex
    )

[4] => stdClass Object
    (
        [type] => chartSVG
        [value] => 12
    )

...

如您所见，上面的最后一个条目 [4] 类型为“chartSVG”，显示值为 12，而它应该包含一个长 svg 字符串。

我似乎也无法访问 Array 中的不同元素 - 例如通过echo $json[2]

我觉得我一定遗漏了一些明显的东西，但我的搜索没有产生任何结果。任何建议/指导将不胜感激。

谢谢。

Answer 1

问题在于您从 JavaScript 发送了无效的 JSON。您可以将您的 JSON 复制粘贴到类似 JSONLint 的位置，以查看您的 SVG 中是否存在错误

Parse error on line 20:
...ue": "<g transform="translate(168.333333
-----------------------^
Expecting '}', ':', ',', ']'

当您在其中发送 HTML 时，它包含 ".

因此，当您在客户端构建 JSON 时，请确保在 JSON 中包含的字符串中使用 \" 而不是普通的 "。在 JS 中，这可以通过类似的方式来完成

var val = input.replace('"', '\"');