Question

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

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

Answer 1

您可以将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')即可。

Answer 2

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

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

使用PHP的file_get_contents后，将类添加到SVG元素

2 个答案: