SVG可聚焦属性不起作用 [英] SVG focusable attribute is not working

问题描述

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

我需要使用TAB键在SVG标签中的SVG元素中导航。就像文档中提到的一样（ http://www.w3.org/TR/SVGTiny12/interact。 html＃focusable-attr ）

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

以下是我的代码：

 < div style =边框：纯黄色2px;的tabindex = 0 > 
< svg tabindex =0width =900pxheight =500pxviewBox =0 0 95 50style =border：solid red 1px; focusable =true
 xmlns =http://www.w3.org/2000/svg> 
 < circle tabindex =0cx =20cy =25r =5focusable =true data-tabindex =0/> 
< circle tabindex =0cx =40cy =25r =5focusable =true 
 < circle tabindex =0cx =80cy =25r =5focusable =truedata-name =shape 4data-tabindex =0/> 
< / g> 
< / svg> 
  

我测试了代码谷歌浏览器。有什么方法可以达到目的吗？作为@Robert Longson在评论中提到，SVG 1.2从来没有定稿过，而SVG 1.2微小不是由网络浏览器实现的。 SVG 2将具有 tabIndex 属性，其用途与HTML相同，但仍有一些细节需要解决，许多浏览器尚未实现它（Chrome，IE和 Firefox 尊重 tabIndex < a> 在HTML页面中的SVG元素上）。

如果它们具有 xlink：href 属性（即使它是非操作链接，如＃）。您无法控制Tab键顺序，也无法通过脚本控制焦点，但您可以允许用户循环访问元素，并且链接将接收用户输入事件。

以下片段当包含它们的链接获得用户关注时，它会改变你的圈子的样式。

svg {max-height：100vh;最大宽度：100vw; } a：focus {fill：blue;填充不透明度：0.5; outline：none;}

< svg width =900px height =500pxviewBox =0 0 95 50style =border：solid red 1px;的xmlns = http://www.w3.org/2000/svg > < g data-name =groupstroke =greenfill =whitestroke-width =5data-tabindex =0> < a xlink：href =＃> < circle cx =20cy =25r =5data-Name =shape 1data-tabindex =0/> < / A> < a xlink：href =＃> < circle cx =40cy =25r =5data-Name =shape 2data-tabindex =0/> < / A> < a xlink：href =＃> < circle cx =60cy =25r =5data-Name =shape 3data-tabindex =0/> < / A> < a xlink：href =＃> < circle cx =80cy =25r =5data-Name =shape 4data-tabindex =0/> < / A> < / svg>

I used focusable attribute to force SVG elements get focus in HTML document.

I need to navigate in SVG elements in SVG tag by TAB key. Like mentioned in the document (http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr)

But I cannot do it. I have set the focusable attribute to true, and tabindex of each element to 0.

Here is my code:

<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>

I have tested the code in Google Chrome. Is there any way to reach purpose?

解决方案

As @Robert Longson mentioned in the comments, SVG 1.2 was never finalized and SVG 1.2 Tiny is not implemented by web browsers. SVG 2 will have a tabIndex attribute, with the same purpose as in HTML, but there are still some details to work out and many browsers have not implemented it yet (Chrome, IE and Firefox do respect tabIndex on SVG elements in HTML pages).

In the meantime, however, most browsers will allow <a> link elements in SVG to get keyboard focus if they have an xlink:href attribute (even if it is a no-op link like #). You cannot control the tab order, or control focus from scripts, but you can allow users to cycle through elements, and the link will receive user input events.

The following snippet changes the styling of your circles when the link that contains them gets the user focus.

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>

这篇关于SVG可聚焦属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！