SVG 可聚焦属性不起作用答案

【问题标题】：SVG focusable attribute is not workingSVG 可聚焦属性不起作用
【发布时间】：2014-05-05 11:49:43
【问题描述】：

我使用 focusable 属性来强制 SVG 元素在 HTML 文档中获得焦点。

我需要通过 TAB 键在 SVG 标记中导航 SVG 元素。就像文档中提到的（http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr）

但我做不到。我已将每个元素的focusable 属性设置为true，并将每个元素的tabindex 设置为0。

这是我的代码：

<div style="border: solid yellow 2px;" tabindex="0">
<svg tabindex="0" width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;" focusable="true"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" tabindex="0" stroke="green" fill="white" stroke-width="5" data-tabindex="0" style="border: solid green 1px;" focusable="true">
        <circle tabindex="0" cx="20" cy="25" r="5" focusable="true" data-Name="shape 1"  data-tabindex="0" />
        <circle tabindex="0" cx="40" cy="25" r="5" focusable="true" data-Name="shape 2"  data-tabindex="0" />
        <circle tabindex="0" cx="60" cy="25" r="5" focusable="true" data-Name="shape 3" data-tabindex="0" />
        <circle tabindex="0" cx="80" cy="25" r="5" focusable="true" data-Name="shape 4" data-tabindex="0" />
    </g>
</svg>

我已经在 Google Chrome 中测试了代码。有什么方法可以达到目的吗？

【问题讨论】：

大多数浏览器（包括 Chrome）一般只实现 SVG 1.1。 SVG 1.1 没有可聚焦的功能，但 SVG 2 即将推出，浏览器将瞄准它，它将具有可聚焦的（或一些等效的替代方案）
@RobertLongson：谢谢。

标签： javascript jquery html svg

【解决方案1】：

正如@Robert Longson 在 cmets 中提到的，SVG 1.2 从未最终确定，并且 SVG 1.2 Tiny 也没有被 Web 浏览器实现。 SVG 2 将有一个 tabIndex 属性，其目的与 HTML 相同，但仍有一些细节需要解决，许多浏览器尚未实现它（Chrome、IE 和 Firefox 尊重 SVG 上的 tabIndex HTML 页面中的元素）。

然而，与此同时，大多数浏览器将允许 SVG 中的 <a> 链接元素获得键盘焦点，如果它们具有 xlink:href 属性（即使它是像 # 这样的无操作链接）。您无法控制 Tab 键的顺序，或从脚本控制焦点，但您可以允许用户循环浏览元素，并且链接将接收用户输入事件。

当包含圈子的链接获得用户关注时，以下 sn-p 会更改圈子的样式。

svg {
  max-height: 100vh;
  max-width: 100vw;
  }

a:focus {
  fill: blue;
  fill-opacity: 0.5;
  outline: none;
}

<svg width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" stroke="green" fill="white" stroke-width="5" data-tabindex="0" >
      <a xlink:href="#">
        <circle cx="20" cy="25" r="5" data-Name="shape 1"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="40" cy="25" r="5" data-Name="shape 2"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
      </a>
    </g>
</svg>

【讨论】：

这个问答将获得多少访问，因为它是featured on CSS-Tricks？很好的答案，@AmeliaBR
focusable 根据allyjs.io/data-tables/focusable.html#svg-element-ident-142似乎在IE和Edge中有效果

【解决方案2】：

我一直在寻找一种在 SVG 内部导航的解决方案，我的目的是拥有一些 SVG 元素并从一个元素导航到另一个元素。
这个库是一个很好的解决方案：https://github.com/flesler/jquery.scrollTo/releases我从节点导航的代码到另一个节点是（从黄色圆圈导航到红色圆圈）：

<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.scrollTo.min.js"></script>
	<script type="text/javascript" src="./js/jquery.localScroll.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
			/**
			 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
			 * @see http://demos.flesler.com/jquery/scrollTo/
			 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.localScroll.
			 */
			
			// The default axis is 'y', but in this demo, I want to scroll both
			// You can modify any default like this
			$.localScroll.defaults.axis = 'xy';
			
			$.localScroll({
				//target: '#content', // could be a selector or a jQuery object too.
				queue:true,
				duration:1000,
				hash:true,
				lazy:true,
				onBefore:function( e, anchor, $target ){
					// The 'this' is the settings object, can be modified
				},
				onAfter:function( anchor, settings ){
					// The 'this' contains the scrolled element (#content)
				}
			});
			
			$('#nodeX').click(function() {
				$('html, body').scrollTo(document.getElementById('node1'), 1000);
			});
		});

</script>
</head>
<body>

<svg id="panel" width="3249pt" height="2200pt" viewBox="0.00 0.00 3249.00 2200.00" >

<g id="nodeX">
 <a xlink:href="#node1">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </a>
 </g>

 <g id="node1">
 <circle cx="1880" cy="1580" r="40" stroke="green" stroke-width="4" fill="red" />
 </g>
 
</svg>

</body>

【讨论】：