PHP 从 SVG 文件中获取 svg 标签,并将其显示在 DIV 中的 HTML 中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29991284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 00:41:53  来源:igfitidea点击:

PHP get svg tag from SVG file, and show it in HTML in DIV

phpsvgdomdocument

提问by Patrik

I want to read an SVG file and get the SVG tag from this file (because I want to show svg in html e.g. <div><svg>...</svg></div>without the xml header).

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

And show this svg tag in browser like HTML - print this SVG TAG like SVG image. Becouse now I'm gettong wrong output "DOMNodeList Object ( [length] => 1 )".

并在浏览器中像 HTML 一样显示这个 svg 标签 - 像 SVG 图像一样打印这个 SVG 标签。因为现在我弄错了输出“ DOMNodeList Object ( [length] => 1 )”。

PHP

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

回答by Patrik

I found solution, but it is not exactly the answer for my question. So I will not mark it as a answer, but I leave here this solution. Maybe there will be somebody who will need it... :)

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

I just read file content, then I look for position of string "< svg", and then substract this piece of code.

我只是读取文件内容,然后查找字符串"< svg" 的位置,然后减去这段代码。

PHP

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

?>

回答by mhall

You were definitely on the right track with you first attempt. I could spot two small problems though:

您第一次尝试时肯定走在正确的轨道上。不过,我可以发现两个小问题:

  1. As you may have guessed, you tried to output a DOMNodeListobject, which is what you will get from a call to getElementsByTagName. As the name implies, it is not a single node object but a collection of those so you would be interested in just the first found svgnode (item(0)in code below).
  2. DOM* instances do not automatically get converted into strings when printed. Use the C14N()method instead for output.
  1. 您可能已经猜到了,您尝试输出一个DOMNodeList对象,这就是您将通过调用getElementsByTagName 获得的内容。顾名思义,它不是单个节点对象,而是这些对象的集合,因此您只会对第一个找到的svg节点(item(0)在下面的代码中)感兴趣。
  2. DOM* 实例在打印时不会自动转换为字符串。使用C14N()方法代替输出。

Code:

代码:

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

回答by Sivustonikkari

This seems to be the first hit for this topic in Google. Based on the other replies and what the original question was about, the answer to the original question is that getElementsByTagName returns an array, so you need to take the the first item in that array and use the saveHTML() method of DOMDocument. I made a short utility function to do just that.

这似乎是该主题在 Google 中的第一次点击。根据其他回复和原问题的内容,原问题的答案是 getElementsByTagName 返回一个数组,因此您需要获取该数组中的第一项并使用 DOMDocument 的 saveHTML() 方法。我做了一个简短的实用函数来做到这一点。

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