为什么 document.title 不适用于 SVG？

Question

我创建了简单的 SVG 文档并在 Chrome 和 FF 中打开它

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
  </g>
</svg>

为什么 document.title 返回 ""？

按照标准https://www.w3.org/TR/html51/dom.html#dom-tree-accessors

文件。标题 [ = 价值 ] 返回文档的标题，由 HTML 的 title 元素和 SVG 的 SVG title 元素给出。

Answer 1

要在将鼠标悬停在 svg 元素上时显示提示消息，您需要使用组标签将其包装起来。
您有组标签<g>，但里面是空的。

请看下面将显示提示的示例：

<svg  width="50%" height="50%" viewBox="0 0 400 400">
<g id="titleRect">
<title> This is a green square </title>
<rect id="rect1" x="10" y="100" width="100" height="100" fill="yellowgreen" /> 
</g>

<g id="titleCircle">
<title> This is a purple circle.  </title>
<circle id="circle1" cx="200" cy="150" r="50"  fill="purple" /> 
</g>
</svg>

多行工具提示

要获得多行工具提示，您必须在<title> 标签内使用换行符

html, body, svg {
  margin: auto;
  width: 100vmin;
  display: block;
}

<svg viewBox="-4 -4 8 8">
  <g>
    <title>Multiline
the tooltip is
very easy!</title>
    <circle r="4" fill="purple" />
  </g>
</svg>

获取多行工具提示的第二种方式

此方法使用嵌套标签<title>

<title> 
       <title>   &#10697;   Atom properties </title>
       <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
       <title> Name: oxygen </title>
       <title> Atomic mass (molar mass) :15,99903 </title>
       <title> Atomic radius    60 (48) пм  </title> 
       <title> &#10697; Chemical properties  </title>
<title> 

将光标悬停在中心圆上并查看多行工具提示。

.container {
width:40%;
height:40%;

}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-52 -53 100 100" stroke-width="2">
 
 <g fill="none">
   <g> 
     <title> Orbit of the first atom  </title> 
    <ellipse fill="#F0F0F0" stroke="#66899a" rx="6" ry="44" />
   </g>  
       <g>     
        <ellipse fill="#F0F0F0" stroke="#e1d85d" rx="6" ry="44"  transform="rotate(-66)"/>
		  <title> Orbit of the second atom  </title> 
		</g>  
	 <g>	
      <ellipse fill="#F0F0F0" stroke="#80a3cf" rx="6" ry="44" transform="rotate(66)"/>
       <title> Orbit of the third atom  </title> 
	 </g>   
  
    
   <circle  stroke="#4b541f" r="44"/> 
   

 </g> 
 <g fill="#66899a" stroke="white">
   <g>   
     <title> 
	   <title>   &#10697;   Atom properties </title>
	   <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
	   <title> Name: oxygen </title>
	   <title> Atomic mass (molar mass) :15,99903 </title>
	   <title> Atomic radius	60 (48) пм  </title> 
	   <title> &#10697; Chemical properties  </title>
	    <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
	   <title> Covalent radius	73 пм </title>
	   <title> Ion radius	132 (-2e) пм </title>
	   <title> Electrode potential	0 </title>
	   <title>&#10697;Thermodynamic properties of a simple substance </title>
	    <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
	   <title>Density (at n. At.) Gas: 1,42897 kg/m³ </title>
	   <title>Melting temperature	54,8 К (-218,35 °C) </title>
	   <title>Boiling temperature	90,19 К (-182,96 °C) </title>
	   
	 </title>
     <circle fill="#80a3cf" r="13"/>
      
    </g>
  
 <g>
    <title>First atom</title>   
     <circle cy="-44" r="9"/>
 </g> 
   <g>
     <title>Second atom</title>
     <circle cx="40" cy="18" r="9"/>
   </g>
      <g>
         <title>Third atom</title> 
         <circle cx="-40" cy="18" r="9"/>
     </g> 
   
 </g>
</svg>
</div>

Answer 2

改用document.title：

<svg xmlns="http://www.w3.org/2000/svg"
     width="4in" height="3in">
  <title>Company sales by region</title>
</svg>

spec says:

如果文档元素是 SVG svg 元素，则让 value 为第一个 SVG title 元素的子文本内容它是文档元素的子元素。

所以document.title 为问题中的 sn-p 返回"" 的原因是，在该 sn-p 中，title 元素不是文档元素（svg 元素）的子元素。