为什么 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 return ""?

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

document . title [ = value ] Returns the document’s title, as given by the title element for HTML and as given by the SVG title element for SVG.

Answer 1

试试 document.title 代替：

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

spec says:

If the document element is an SVG svg element, then let value be the child text content of the first SVG title element that is a child of the document element.

所以问题中的片段 document.title returns "" 的原因是在该片段中 title 元素不是文档元素的子元素（svg 元素）。

Answer 2

要在将鼠标悬停在 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>

Multi-line 工具提示

要获得 multi-line 工具提示，您必须在 <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>

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

Why document.title doesn't work for SVG?

javascript

html

dom

svg

w3c