SVG fokussierbares Attribut funktioniert nicht

Ich verwendete fokussierbares Attribut, um SVG-Elemente zu zwingen, den Fokus im HTML-Dokument zu erhalten.SVG fokussierbares Attribut funktioniert nicht

Ich muss in SVG-Elementen in SVG-Tag mit TAB-Taste navigieren. Wie in dem Dokument erwähnt (http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr)

Aber ich kann es nicht tun. Ich habe das focusable Attribut zu true und tabindex von jedem Element zu 0 gesetzt.

Hier ist mein 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>

ich den Code in Google Chrome getestet haben. Gibt es einen Weg, den Zweck zu erreichen?

Quelle

2014-03-26 farid bekran

Den meisten Browsern (einschließlich Chrome) nur implementieren SVG 1.1 im Allgemeinen. SVG 1.1 ist nicht fokussierbar, aber SVG 2 kommt und Browser werden das Ziel haben und es wird fokussierbar sein (oder eine gleichwertige Alternative) –

@RobertLongson: Danke. –

Wie @Robert Longson in den Kommentaren erwähnt, wurde SVG 1.2 nie finalisiert und SVG 1.2 Tiny ist nicht von Webbrowsern implementiert. SVG 2 hat ein tabIndex Attribut, mit dem gleichen Zweck wie in HTML, aber es gibt noch einige Details zu erarbeiten und viele Browser haben es noch nicht implementiert (Chrome, IE und Firefox respektieren tabIndex auf SVG-Elemente in HTML-Seiten).

In der Zwischenzeit aber werden die meisten Browser <a> Verbindungselemente in SVG erlauben Tastaturfokus zu erhalten, wenn sie ein xlink:href Attribut haben (auch wenn es ein Link wie # no-op ist). Sie können die Aktivierreihenfolge nicht steuern oder den Fokus nicht über Skripts steuern, aber Sie können Benutzern das Durchlaufen von Elementen erlauben, und der Link erhält Benutzereingabeereignisse.

Das folgende Snippet ändert das Styling Ihrer Kreise, wenn der Link, der sie enthält, den Benutzerfokus erhält.

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>

Quelle

2015-02-22 04:21:39 AmeliaBR

Wie viele Besuche erhält dieses Q & A jetzt, dass es [in CSS-Tricks] (https://css-tricks.com/click-svg-to-focus/) war? Große Antwort, @ AmeliaBR – Mindwin

'focusable' scheint eine Wirkung in IE und Edge nach https://allyjs.io/data-tables/focusable.html#svg-element-ident-142 – phk

Und Mozilla wontfixed es: https: //bugzil.la/409404 – phk

Ich suchte nach einer Lösung suchen jetzt eine Zeit lang innerhalb SVG zu navigieren, ist meine Absicht, einige SVG-Elemente haben und von einem zum anderen navigieren.
Eine gute Lösung diese Bibliothek ist: https://github.com/flesler/jquery.scrollTo/releases Mein Code, der auf einem anderen Knoten von einem Knoten navigiert ist (navigiert von gelbem Kreis zu Roten):

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

Quelle

2015-06-23 07:26:05 Lucian

SVG fokussierbares Attribut funktioniert nicht

Antwort

Verwandte Themen