使用 PHP 的 file_get_contents 后向 SVG 元素添加类答案

【问题标题】：Add Classes to an SVG element after using PHP's file_get_contents使用 PHP 的 file_get_contents 后向 SVG 元素添加类
【发布时间】：2016-05-24 10:06:04
【问题描述】：

我需要获取 SVG 图像并将图像插入到页面中。我正在使用以下方式获取图像：

<?php echo file_get_contents("logo.svg"); ?>

输出类似的东西

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"">
    <path d="M12 2c5.514 0 10 4.486"></path>
</svg>

在插入页面后，我将如何向 SVG 元素添加一个类？如：

<svg class="LogoStyle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"">
    <path d="M12 2c5.514 0 10 4.486"></path>
</svg>

或定位到路径元素：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"">
    <path class="LogoStyle" d="M12 2c5.514 0 10 4.486"></path>
</svg>

任何帮助都会很好，谢谢！

【问题讨论】：

标签： php html svg

【解决方案1】：

您可以在插入页面后使用jQuery为元素添加类。

$('svg').addClass('LogoStyle');

【讨论】：

有道理，我有点希望有一种方法可以获取 SVG 文件并使用 PHP 将类名包含到 DOM 中。我想这和其他方法一样简单。

【解决方案2】：

您可以将 svg 存储为 PHP 变量，然后使用 DOMDocument() 功能来完成此操作。

$svg = file_get_contents("logo.svg");
$dom = new DOMDocument();
$dom->loadHTML($svg);
foreach($dom->getElementsByTagName('svg') as $element) {
    $element->setAttribute('class','new-classname-goes-here');  
}
$dom->saveHTML();
$svg = $dom->saveHTML();    
echo $svg;

要定位path 而不是svg 元素，只需将getElementsByTagName('svg') 更新为getElementsByTagName('path')。

【讨论】：