在 PHP 中打印包含 SVG 元素的 JSON 数组


printing json array containing svg elements in php

我一直在用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)时,我只会得到"数组"

如果我这样做:

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字符串。

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

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

谢谢。

问题在于您从 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('"', ''"');