使用 PHP 的file_get_contents后将类添加到 SVG 元素 - Add Classes to an SVG element after using PHP's file_get_contents

Add Classes to an SVG element after using PHP's file_get_contents

我需要获取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>

或定位到 path 元素：

<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>

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

您可以将

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') 。

在插入到页面上后，可以使用jQuery向元素添加类。

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