SVG的focusable属性无法正常工作

Question

SVG的focusable属性无法正常工作

javascriptjqueryhtmlsvg

20

我使用了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>

我已经在谷歌浏览器中测试了这段代码。有没有办法达到目的？

- farid bekran

9

大多数浏览器（包括Chrome）通常只实现SVG 1.1。SVG 1.1没有可聚焦元素，但是SVG 2即将推出，浏览器将会支持它并且它会有可聚焦元素（或一些等效的替代方法）。 - Robert Longson

@RobertLongson: 谢谢。 - farid bekran

2个回答

1

我一直在寻找一种浏览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>

- Lucian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmeliaBR · Accepted Answer

正如@Robert Longson在评论中提到的，SVG 1.2从未最终确定，并且Web浏览器没有实现SVG 1.2 Tiny。 SVG 2将具有tabIndex属性，与HTML中的作用相同，但仍有一些细节需要解决，许多浏览器尚未实现它（Chrome、IE和Firefox会在HTML页面上对SVG元素上的tabIndex进行正确处理）。

然而，与此同时，如果<a>链接元素具有xlink:href属性（即使是一个无操作链接，例如#），大多数浏览器仍将允许在SVG中获取键盘焦点。您无法控制选项卡顺序或通过脚本控制焦点，但您可以允许用户循环浏览元素，并且该链接将接收用户输入事件。

以下代码段可在包含圆形的链接获得用户焦点时更改其样式。

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>