从SVG文件中获取SVG标签，并在DIV中以HTML形式显示

Question

我想读取一个SVG文件，并从中获取SVG标签（因为我想在HTML中显示SVG，例如<div><svg>...</svg></div>，而不包含XML头）。

并像HTML一样在浏览器中显示这个svg标签 - 将此SVG标签打印为SVG图像。因为现在我得到了错误的输出“DOMNodeList对象（[长度] => 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>";

- Patrik

---

听起来类似于这个问题 http://stackoverflow.com/questions/10106407/how-to-echo-a-domnodelist-object-and-a-domelement-object - Robert Longson

<img src="log.svg" alt="Logo" />有什么问题吗？ - Marcel Burkhard

我需要通过jQuery复制svg标签并编辑这个svg代码...使用<img src='logo.svg... '是不可能的。 - Patrik

Answer 1

我找到了解决方案，但它不完全是我问题的答案。因此我不会将其标记为答案，但我会在这里留下这个解决方案。也许会有人需要它...

我只是读取文件内容，然后查找字符串"< 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>";

?>

- Patrik

Answer 2

你第一次尝试的方法确实是正确的，但我发现了两个小问题:

1. 正如你所猜测的那样，你试图输出一个 DOMNodeList 对象，这是从调用 getElementsByTagName 返回的内容。如其名称所示，它不是单个节点对象，而是由多个节点组成的集合，因此你只需要寻找到第一个被找到的 svg 节点（在下面的代码中使用了 item(0) ）。
2. DOM* 实例在打印时不会自动转换为字符串。要进行输出，请使用C14N() 方法。

代码：

$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>';

- mhall

Answer 3

这似乎是谷歌上此话题的首个搜索结果。根据其他回复和原问题所述，对于原问题，getElementsByTagName返回一个数组，因此您需要获取该数组中的第一个项目，并使用DOMDocument的saveHTML()方法。我创建了一个简短的实用程序函数来完成这项工作。

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

- Sivustonikkari