I used focusable attribute to force SVG elements get focus in HTML document.
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)
But I cannot do it. I have set the focusable
attribute to true
, and tabindex
of each element to 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?