getElementsByTagName 未检测到 SVG -- PHP答案

【问题标题】：getElementsByTagName not detecting SVG -- PHPgetElementsByTagName 未检测到 SVG -- PHP
【发布时间】：2016-06-17 08:22:56
【问题描述】：

我正在尝试从 HTML 中获取 <svg> 内容并将其放入数组中以供以后使用。我的代码...

$html_content = '
<div class="stage" id="shape_1"><svg height="100" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.316681px; top: -0.650024px;"><desc>Created with Raphaël 2.1.2</desc><defs/><rect x="75" y="25" width="200" height="50" r="0" rx="0" ry="0" fill="#90ee90" stroke="#000" style="fill-opacity: 0.5;" fill-opacity="0.5" stroke-width="0"/><path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M75,25L275,25" stroke-width="2" stroke-opacity="0.8"/><path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M275,25L275,75" stroke-width="2" stroke-opacity="0.8"/><path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M275,75L75,75" stroke-width="2" stroke-opacity="0.8"/><path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M75,75L75,25" stroke-width="2" stroke-opacity="0.8"/><text style="text-anchor: middle; font: 15px Arial;" x="175" y="85" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" transform="matrix(1,0,0,1,0,6.5)" font-family="Arial" font-size="15px" font-style="normal" font-weight="normal"><tspan dy="5">x + 10 ft.</tspan></text><text style="text-anchor: end; font: 15px Arial;" x="65" y="50" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-family="Arial" font-size="15px" font-style="normal" font-weight="normal"><tspan dy="5">x ft.</tspan></text></svg></div>';

$doc = new DOMDocument();
$doc->loadHTML($html_content);

$svg = $doc->getElementsByTagName('svg');
foreach ($svg as $svg_item) {
    array_push($svg_array, $svg_item);
}

print_r($svg_array);

问题是$svg_array 是空的。我知道$html_content 中肯定有<svg> 内容。

顺便说一句，我在整个页面上收到了几个警告（因为我正在循环运行上述代码）。他们就像......

“警告：DOMDocument::loadHTML() [domdocument.loadhtml]：意外的结束标记：实体中的 div，行：46 in...”

或

“警告：DOMDocument::loadHTML() [domdocument.loadhtml]: 标签 c 在实体中无效，行：119 in...”

编辑：经过深入调查，我的代码的精简版本会产生以下警告...

警告：DOMDocument::loadHTML() [domdocument.loadhtml]: Tag svg 在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]: Tag desc 在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]：标签定义在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]: Tag rect 在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]：实体中的标记路径无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]：标签文本在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]: Tag tspan 在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]：标签文本在实体中无效，行：2 in.....

警告：DOMDocument::loadHTML() [domdocument.loadhtml]: Tag tspan 在实体中无效，行：2 in.....

也许<svg> 不支持？？？？

想法？

【问题讨论】：

是的，您至少应该将实际代码添加到问题中（或显示相同问题的缩减副本）。听起来确实很像 html 格式错误。虽然您知道 $htmlContent 包含某些内容，但您如何知道它是否已正确加载并传递给 $doc 对象？
@enhzflep：我正在输出它，并且正确的内容以正确的方式显示。
您已经在这里待了足够长的时间了，因此我们始终建议您使用 MCVE。如果您选择不提供，如果读者选择不回答您的问题，请不要感到惊讶。：耸耸肩：stackoverflow.com/help/mcve
我的帖子中有代码。 $html_content 的完整内容太长，无法发布。：耸肩：
创建一个minimal reproducible example，然后将 html 缩减到最小。

标签： php html svg domdocument

【解决方案1】：

既然包含了有问题的 html 字符串，问题可能更容易解开，并且可以通过将输入文本分散到多行来进一步调查。完成后，我们得到一个分布在 17 行的输入字符串。然后，我们可以使用警告消息和行号来快速识别损害解析器的输入部分。

'<div class="stage" id="shape_1">
    <svg height="100" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.316681px; top: -0.650024px;">
    <desc>Created with Raphaël 2.1.2</desc>
    <defs/>
    <rect x="75" y="25" width="200" height="50" r="0" rx="0" ry="0" fill="#90ee90" stroke="#000" style="fill-opacity: 0.5;" fill-opacity="0.5" stroke-width="0"/>
    <path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M75,25L275,25" stroke-width="2" stroke-opacity="0.8"/>
    <path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M275,25L275,75" stroke-width="2" stroke-opacity="0.8"/>
    <path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M275,75L75,75" stroke-width="2" stroke-opacity="0.8"/>
    <path style="stroke-opacity: 0.8;" fill="none" stroke="#666666" d="M75,75L75,25" stroke-width="2" stroke-opacity="0.8"/>
    <text style="text-anchor: middle; font: 15px Arial;" x="175" y="85" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" transform="matrix(1,0,0,1,0,6.5)" font-family="Arial" font-size="15px" font-style="normal" font-weight="normal">
        <tspan dy="5">x + 10 ft.</tspan>
    </text>
    <text style="text-anchor: end; font: 15px Arial;" x="65" y="50" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-family="Arial" font-size="15px" font-style="normal" font-weight="normal">
    <tspan dy="5">x ft.</tspan>
    </text>
    </svg>
</div>';

现在，如果我们停下来想一想，SVG 实际上不是 html——它也是 XML 的一种方言。相同的父级，但仍然不一样，当我们以您所拥有的方式使用 SVG 时，由于缺乏更好的术语，我们将 XML 嵌入到 HTML 中。考虑到这一点，17 个输入行导致以下警告消息似乎一点也不奇怪。提到的实体确实不是标准的 HTML 实体。（标签是每行的第 5 个单词 - svg、desc、defs 等）

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 2 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag desc invalid in Entity, line: 3 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag defs invalid in Entity, line: 4 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag rect invalid in Entity, line: 5 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 6 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 7 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 8 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 9 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag text invalid in Entity, line: 10 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag tspan invalid in Entity, line: 11 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag text invalid in Entity, line: 13 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

Warning: DOMDocument::loadHTML(): Tag tspan invalid in Entity, line: 14 in C:\xampp2\htdocs\*redacted*\svg.php on line 23

那么，该怎么办？简单的。与其尝试使用 loadHTML 方法加载 XML，不如简单地使用 loadXML 方法。完成后，输出变成这样：

Array ( [0] => DOMElement Object ( [tagName] => svg [schemaTypeInfo] => [nodeName] => svg [nodeValue] => Created with Raphaël 2.1.2 x + 10 ft. x ft. [nodeType] => 1 [parentNode] => (object value omitted) [childNodes] => (object value omitted) [firstChild] => (object value omitted) [lastChild] => (object value omitted) [previousSibling] => (object value omitted) [nextSibling] => (object value omitted) [attributes] => (object value omitted) [ownerDocument] => (object value omitted) [namespaceURI] => http://www.w3.org/2000/svg [prefix] => [localName] => svg [baseURI] => file:/C:/xampp2/htdocs/*redacted*/ [textContent] => Created with Raphaël 2.1.2 x + 10 ft. x ft. ) )

【讨论】：

html includes SVG 所以这几天真的是 html

【解决方案2】：

这可能是PHP不支持这个吗？

以下示例通过 javascripts getElementsByTagName 获取 svg：

var e = document.getElementsByTagName('svg');
console.log(e[0]);

<svg viewBox="0 0 100 100">
</svg>

【讨论】：

【解决方案3】：

此功能不适用于 SVG 等 HTML5 元素。 Web 上的大多数建议是关闭错误以使其与 HTML5 一起使用。

【讨论】：

确实如此。虽然 HTML5 允许定义自己的元素/实体，但当定义了自己的标签时，loadHTML 方法有点无用。对于嵌入式 SVG，它实际上不是 HTML，而是 XML，因此包含 HTML 解析器无法识别的标签——这种情况与尝试解析包含自定义元素的 HTML5 代码时遇到的情况没有什么不同。反对票反对。