PHP 从 SVG 文件中获取 svg 标签,并在 HTML 中显示它 DIV
PHP get svg tag from SVG file, and show it in HTML in DIV
我想读取一个 SVG 文件并从此文件中获取 SVG 标签(因为我想在 html 中显示 svg,例如 <div><svg>...</svg></div>
而没有 xml header).
并在浏览器中显示此 svg 标签,如 HTML - 打印此 SVG 标签,如 SVG 图像。因为现在我得到了错误的输出 "DOMNodeList Object ( [length] => 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>";
我找到了解决方案,但这并不是我问题的确切答案。所以我不会将其标记为答案,但我将此解决方案留在这里。也许会有人需要它... :)
我只是读取文件内容,然后我寻找字符串 "< 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>";
?>
您的第一次尝试绝对是正确的。不过,我可以发现两个小问题:
- 您可能已经猜到了,您试图输出一个 DOMNodeList object, which is what you will get from a call to getElementsByTagName。顾名思义,它不是单个节点对象,而是这些节点的集合,因此您只对第一个找到的
svg
节点(下面代码中的 item(0)
)感兴趣。
- 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>';
这似乎是 Google 中该主题的第一篇热门文章。根据其他答复和原始问题的内容,原始问题的答案是 getElementsByTagName returns 一个数组,因此您需要获取该数组中的第一项并使用 saveHTML() 方法DOM文档。我做了一个简短的实用函数来做到这一点。
function print_svg($file){
$iconfile = new DOMDocument();
$iconfile->load($file);
echo $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
}
我想读取一个 SVG 文件并从此文件中获取 SVG 标签(因为我想在 html 中显示 svg,例如 <div><svg>...</svg></div>
而没有 xml header).
并在浏览器中显示此 svg 标签,如 HTML - 打印此 SVG 标签,如 SVG 图像。因为现在我得到了错误的输出 "DOMNodeList Object ( [length] => 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>";
我找到了解决方案,但这并不是我问题的确切答案。所以我不会将其标记为答案,但我将此解决方案留在这里。也许会有人需要它... :)
我只是读取文件内容,然后我寻找字符串 "< 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>";
?>
您的第一次尝试绝对是正确的。不过,我可以发现两个小问题:
- 您可能已经猜到了,您试图输出一个 DOMNodeList object, which is what you will get from a call to getElementsByTagName。顾名思义,它不是单个节点对象,而是这些节点的集合,因此您只对第一个找到的
svg
节点(下面代码中的item(0)
)感兴趣。 - 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>';
这似乎是 Google 中该主题的第一篇热门文章。根据其他答复和原始问题的内容,原始问题的答案是 getElementsByTagName returns 一个数组,因此您需要获取该数组中的第一项并使用 saveHTML() 方法DOM文档。我做了一个简短的实用函数来做到这一点。
function print_svg($file){
$iconfile = new DOMDocument();
$iconfile->load($file);
echo $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
}