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

请尝试使用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为问题中的代码段返回""的原因是，在该代码段中，title元素不是文档元素的子元素（{{1} } element）。

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>

多行工具提示

要获取多行工具提示，必须在<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？

2 个答案: