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

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

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

JSON完全毫无意义。经验教训。

Answer 2

我会说是的。考虑到你是动态做的，简单地通过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() );
});}

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

阅读完评论后，我会提供一个替代答案，但我不会因此而获得赞誉。

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

我想要的建议是在线程的底部。

PHP - 高效显示内联SVG图像

2 个答案: