PHP从SVG文件中获取svg标记,并在DIV中以HTML格式显示

时间:2015-05-01 16:52:46

标签: php svg domdocument

我想读取一个SVG文件并从该文件中获取SVG标记(因为我想在html中显示svg,例如<div><svg>...</svg></div>没有xml标题)。

在浏览器中显示此svg标签,如HTML - 打印此SVG标签,如SVG图像。贝塞尔现在我输错了输出“ DOMNodeList Object([length] =&gt; 1)”。

PHP

$doc = new DOMDocument();
$doc->load('http://example.com/logo.svg');
$svg = $doc->getElementsByTagName('svg');

echo "<div style='width: 100%, height: 100%; '>";
print_r($svg); // DOMNodeList Object ( [length] => 1 ) 
echo "</div>";

3 个答案:

答案 0 :(得分:8)

我找到了解决方案,但这不是我的问题的答案。所以我不会将其标记为答案,但我将这个解决方案留在这里。也许会有人需要它...... :)

我只是阅读文件内容,然后查找字符串“&lt; svg”的位置,然后减去这段代码。

PHP

<?php 
$svg_file = file_get_contents('http://example.com/logo.svg');

$find_string   = '<svg';
$position = strpos($svg_file, $find_string);

$svg_file_new = substr($svg_file, $position);

echo "<div style='width:100%; height:100%;' >" . $svg_file_new . "</div>";

?>

答案 1 :(得分:3)

你第一次尝试时肯定是在正确的轨道上。我可以发现两个小问题:

  1. 正如您可能已经猜到的那样,您尝试输出DOMNodeList对象,这是通过调用getElementsByTagName获得的对象。顾名思义,它不是单个节点对象,而是这些节点的集合,因此您只对第一个找到的svg节点(下面的代码中为item(0))感兴趣。
  2. DOM *实例在打印时不会自动转换为字符串。请改用C14N()方法进行输出。
  3. 代码:

    $svg_file = <<<END_OF_SVG
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'>
        <title>Test</title>
        <circle cx='150' cy='150' r='70' style='fill: gold;' />
    </svg>
    END_OF_SVG;
    
    $doc = new DOMDocument();
    $doc->loadXML($svg_file);
    $svg = $doc->getElementsByTagName('svg');
    
    echo '<div style="width: 100%; height: 100%;">';
    echo $svg->item(0)->C14N();
    echo '</div>';
    

答案 2 :(得分:0)

这似乎是该主题在Google中的第一热门。根据其他答复和原始问题的答案,原始问题的答案是getElementsByTagName返回一个数组,因此您需要采用该数组中的第一项并使用DOMDocument的saveHTML()方法。我做了一个简短的实用程序功能来做到这一点。

function print_svg($file){
    $iconfile = new DOMDocument();
    $iconfile->load($file);
    echo $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
}