SVG可聚焦屬性不起作用

我使用了focusable屬性來強制SVG元素獲取HTML文檔中的焦點。SVG可聚焦屬性不起作用

我需要使用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>

我測試了谷歌瀏覽器的代碼。有什麼辦法達到目的？

來源

2014-03-26 farid bekran

大多數瀏覽器（包括Chrome）僅實現一般SVG 1.1。 SVG 1.1沒有可調焦的功能，但SVG 2即將推出，瀏覽器將以此爲目標，並且它將具有可調焦（或一些等效替代） –

@RobertLongson：謝謝。 –

作爲@Robert Longson在評論中提到，SVG 1.2從來沒有定稿，SVG 1.2 Tiny也沒有通過網頁瀏覽器實現。 SVG 2將具有tabIndex屬性，其用途與HTML相同，但仍有一些細節需要解決，許多瀏覽器尚未實現它（Chrome，IE和Firefox在HTML頁面中的SVG元素上的確尊重tabIndex）。

在此期間，但是，大多數瀏覽器將允許在SVG <a>鏈接元素獲得鍵盤焦點，如果他們有一個xlink:href屬性（即使它是一個空操作鏈接像#）。您無法控制選項卡順序，或者通過腳本控制焦點，但您可以允許用戶循環訪問元素，並且鏈接將接收用戶輸入事件。

當包含它們的鏈接獲得用戶焦點時，以下片段會更改圈子的樣式。

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>

來源

2015-02-22 04:21:39 AmeliaBR

現在這個問答有多少訪問現在已經[在CSS-Tricks上有特色]（https://css-tricks.com/click-svg-to-focus/）？很好的答案，@AmeliaBR – Mindwin

'focusable'似乎在IE和Edge中有效，根據https://allyjs.io/data-tables/focusable.html#svg-element-ident-142 – phk

而Mozilla不會定義它：https： //bugzil.la/409404 – phk

我正在尋找一個解決方案現在裏面SVG瀏覽了一會兒，我的意思是有一些SVG元素和從一個到另一個導航。
一個好的解決辦法是這樣的庫：https://github.com/flesler/jquery.scrollTo/releases我的代碼，從一個節點導航到另一個節點是（從黃色圓圈導航到紅色）：

<html> 
 
<head> 
 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
 
\t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="./js/jquery.scrollTo.min.js"></script> 
 
\t <script type="text/javascript" src="./js/jquery.localScroll.js"></script> 
 
\t <script type="text/javascript"> 
 
\t \t jQuery(function($){ 
 
\t \t \t /** 
 
\t \t \t * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option. 
 
\t \t \t * @see http://demos.flesler.com/jquery/scrollTo/ 
 
\t \t \t * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.localScroll. 
 
\t \t \t */ 
 
\t \t \t 
 
\t \t \t // The default axis is 'y', but in this demo, I want to scroll both 
 
\t \t \t // You can modify any default like this 
 
\t \t \t $.localScroll.defaults.axis = 'xy'; 
 
\t \t \t 
 
\t \t \t $.localScroll({ 
 
\t \t \t \t //target: '#content', // could be a selector or a jQuery object too. 
 
\t \t \t \t queue:true, 
 
\t \t \t \t duration:1000, 
 
\t \t \t \t hash:true, 
 
\t \t \t \t lazy:true, 
 
\t \t \t \t onBefore:function(e, anchor, $target){ 
 
\t \t \t \t \t // The 'this' is the settings object, can be modified 
 
\t \t \t \t }, 
 
\t \t \t \t onAfter:function(anchor, settings){ 
 
\t \t \t \t \t // The 'this' contains the scrolled element (#content) 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $('#nodeX').click(function() { 
 
\t \t \t \t $('html, body').scrollTo(document.getElementById('node1'), 1000); 
 
\t \t \t }); 
 
\t \t }); 
 

 
</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"> 
 
\t <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>

來源

2015-06-23 07:26:05 Lucian

SVG可聚焦屬性不起作用

回答

相關問題