javascript SVG 可聚焦属性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22671799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG focusable attribute is not working
提问by farid bekran
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 focusableattribute to true, and tabindexof each element to 0.
但我做不到。我已将focusable属性设置为true, 并将tabindex每个元素的属性设置为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?
我已经在谷歌浏览器中测试了代码。有什么方法可以达到目的吗？
回答by AmeliaBR
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 tabIndexattribute, 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 Firefoxdo respect tabIndexon SVG elements in HTML pages).
正如@Robert Longson 在评论中提到的那样，SVG 1.2 从未最终确定，并且 SVG 1.2 Tiny 未由 Web 浏览器实现。SVG 2 将有一个tabIndex属性，与 HTML 中的用途相同，但仍有一些细节需要解决，许多浏览器尚未实现它（Chrome、IE 和Firefox确实尊重tabIndexHTML 页面中的 SVG 元素）。
In the meantime, however, most browsers will allow <a>link elements in SVG to get keyboard focus if they have an xlink:hrefattribute (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.
然而，与此同时，大多数浏览器将允许<a>SVG 中的链接元素获得键盘焦点，如果它们具有xlink:href属性（即使它是像 一样的无操作链接#）。您无法通过脚本控制 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;
}<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>回答by Lucian
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/releasesMy 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我从一个节点导航到另一个节点的代码是（从黄色圆圈导航到红色圆圈）：
<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>