时间戳

首页 > 解决方案 > svg 无法在 IE 中正常显示工具提示，但在 Chrome 中正常显示

javascript - svg 无法在 IE 中正常显示工具提示，但在 Chrome 中正常显示

问题描述

我无法在 IE 中正常显示工具提示，但在 Chrome 中正常显示。

  1. 使用一些 js 代码创建名为title的动态标签。

  2. 将其添加到 svg 中。

  3. 在带有工具提示的 Chrome 中一切都是正确的，但在 IE 中却不是。

<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
      <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
</svg>

这是我的javascript：

// Create dynamically label for tooltip
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);

标签： javascripthtmlsvg

解决方案

IE 不会为<title>根<svg>元素的元素显示任何工具提示。 

svg {border: 1px solid}
<svg>
  <title>IE won't show this as a tooltip</title>
  <rect x="50" y="50" width="50" height="50">
    <title>However this will be in a tooltip even in IE</title>
  </rect>
</svg>
IE的小提琴

规范明确允许这样的行为：

出于可访问性的原因，用户代理应始终使根 svg 元素的“标题”子元素的内容对用户可用。然而，这通常通过用于嵌套 SVG 和图形元素的工具提示以外的其他方式完成，例如，通过在浏览器选项卡中显示。

如果您希望工具提示出现在此浏览器中，您必须设置内部元素的 <title>。

在您的情况下，它可能<g>包含两个<path>元素，如果不是因为其他 IE 奇怪，它们仅在您将鼠标悬停在绘制区域（笔划和填充）上时才显示工具提示。
因此，鉴于您的路径没有覆盖整个 svg 元素，希望您的用户将悬停在正确的位置有点冒险。

所以这给我们留下了最后一个解决方案，即附加一个<rect>作为覆盖整个视口的不可见背景并处理<title>.

// We are now targetting the <rect> element
var langPickerTogglerElement = document.querySelector('#lang-picker-toggler > rect');
var currentLangElement = document.querySelector('[data-language]');

var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);
svg {border: 1px solid}
<span data-language="My title text is awesome"></span>
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="128" height="128">
  <!-- our tooltip handler, must be a graphic element for IE -->
    <!-- first element so it's set at the background -->
    <!-- cover the whole viewPort -->
    <!-- fill="none" for less work at rendering -->
    <!-- pointer-events=fill so the browser can catch mouse over -->
  <rect
    x="0" y="0" width="512" height="512"
    fill="none"
    pointer-events="fill"/>
  
  <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
  <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>

</svg>

IE的小提琴

推荐阅读