Question

我使用了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中测试了该代码。有没有办法达到目的？

Answer 1

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

然而，与此同时，如果SVG中的tabIndex个链接元素具有<a>属性（即使它是{{1 }}）。您无法控制Tab键顺序或从脚本控制焦点，但您可以允许用户循环浏览元素，链接将接收用户输入事件。

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

＆＃13;

xlink:href

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

SVG focusable属性不起作用

2 个答案: