PHP - 高效显示内联 SVG 图像

Question

我需要在我的页面中显示 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，这肯定是一场噩梦:)

Answer 1

事实上，这是一个过于复杂化的情况。我所要做的就是使用class={{class-name}}svg 代码中的占位符，然后使用加载 svg 文件并使用简单的字符串替换来实现相同的效果。

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

JSON 完全没有意义。学过的知识。