SVGfocusable属性不起作用-SVGfocusableattributeisnotworking

作者：周郎某某某 | 来源：互联网 | 2023-06-29 12:36

IusedfocusableattributetoforceSVGelementsgetfocusinHTMLdocument.我使用了focusable属性来强制SVG元

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

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

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)

我需要通过TAB键在SVG标签中导航SVG元素。如文件中所述(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.

但我不能这样做。我已将focusable属性设置为true,并将每个元素的tabindex设置为0。

Here is my code:

这是我的代码:

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

我在Google Chrome中测试了代码。有没有办法达到目的?

2 个解决方案

#1

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

正如@Robert Longson在评论中提到的,SVG 1.2从未最终确定,SVG 1.2 Tiny没有被Web浏览器实现。 SVG 2将具有tabIndex属性,其目的与HTML相同,但仍有一些细节需要解决,许多浏览器还没有实现它(Chrome,IE和Firefox确实尊重HTML页面中SVG元素的tabIndex)。

In the meantime, however, most browsers will allow 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.

然而,与此同时,如果SVG中的链接元素具有xlink:href属性(即使它是像#的无操作链接),它也会允许SVG中的链接元素获得键盘焦点。您无法控制Tab键顺序或从脚本控制焦点,但您可以允许用户循环浏览元素,并且链接将接收用户输入事件。

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

#2

I was searching for a solution to navigate inside SVG for a while now, my intention is to have some SVG elements and navigate from one to another.
A good solution is this library: https://github.com/flesler/jquery.scrollTo/releases My code that navigates from a node to another node is(navigates from yellow circle to red one):

我正在寻找一种解决方案来在SVG中导航一段时间,我的意图是有一些SVG元素并从一个导航到另一个。一个很好的解决方案是这个库:https://github.com/flesler/jquery.scrollTo/releases我从一个节点导航到另一个节点的代码是(从黄色圆圈导航到红色圆圈):