PHP - 有效地显示内联 SVG 图像答案

【问题标题】：PHP - Efficiently displaying inline SVG imagesPHP - 有效地显示内联 SVG 图像
【发布时间】：2017-09-26 13:56:12
【问题描述】：

我需要在我的页面中显示 svg 图像。由于 svg 图像将使用 css 设置样式（填充、描边等属性），因此 svg 必须是内联的。现在我还需要动态设置这些svg文件的类属性（<svg class="someClass">...</svg>.）。

现在，我的问题是页面可以动态加载任意数量的 svg 图像。并且类名都将从数组中加载。由于 svg 是内联的，因此不可能使用循环来填充类名。

所以我想用json来处理这个。

{
    "icon-name-1" : {
          "viewbox" : "0 0 100 100",
          "svgContent" : "..."
    },

    "icon-name-2" : {
          "viewbox" : "0 0 100 100",
          "svgContent" : "..."
    },  

    ...      
}

然后在 PHP 中，我将文件加载到 json_object 并使用函数加载图标，最后循环数组，现在还带有图标名称，以回显 svg。

    $iconObj = json_decode(file_get_contents("icons.json"));

    function load_SVG ($iconObj, $iconName, $svgClassName) {
        $viewbox = $iconObj->viewbox;

        $svg = "<svg class='$svgClassName' viewBox='$viewbox'>";
            $svg .= $iconObj->$iconName->svgContent;
        $svg .= "</svg>";

        return $svg;
    }

    // array is generated dynamically too
    $arr = [
       ["class-name-1", "icon-name-1"],
       ["class-name-2", "icon-name-2"],
       ...
    ];

    foreach ($arr as $item) {
       load_SVG($iconObj, $item[0], $item[1]);
    }

我觉得我在这里把事情复杂化了。所以我想知道是否有更好的方法或另一种方法来实现相同的目标？但我喜欢的一件事是我不必在代码中看到任何内联 svg，这肯定是一场噩梦 :)

【问题讨论】：

标签： php html css svg

【解决方案1】：

我会说是的。考虑到您是动态进行的，通过 JQuery 或 javascript 简单地替换类标签或插入它们不是更好吗？它们为您提供了出色的工具来标记所有动态创建的标签。

    {<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

$( "content" ).each( function( index, element ){
    console.log( $( this ).text() );
});}

当然，您必须将调试信息更改为类更改方法，而不仅仅是调试文本。

阅读完 cmets 后，我将提供一个替代答案，但我不会为此声明功劳。

其他人回答了这个问题： Is there a better way to write HTML strings in PHP?

我会提出的建议在帖子的底部。

【讨论】：

我没有在任何地方标记js或jQuery，并且标题清楚地有PHP
即使您展示另一种方式，它也是基于意见的，这绝对是不是 OP 所要求的
即使在 OP 声明他/她没有标记 js 你仍然试图提供 js 解决方案。
因为 PHP 解决方案效率极低。这应该由前端处理。当已经通过 JSON 接收到这些信息时，为什么还要用这些信息来打扰后端呢？那么他每次得到信息都需要回电吗？这没有任何意义。
看来你错过了这部分 json_decode(file_get_contents("icons.json")); Ajax 没有发送任何内容。

【解决方案2】：

确实，这是一个过于复杂的案例。我所要做的就是在 svg 代码中使用像 class={{class-name}} 这样的占位符，然后使用加载 svg 文件并使用简单的字符串替换来实现相同的目的。

$svg = file_get_contents($svgPath);
$svg = str_replace("{{class-name}}", $array[$index], $svg);

JSON 完全没有意义。经验教训。

【讨论】：