Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h2>Comparing Focus Outline Of Links</h2>
  
  <h2>Simple bounding box</h2>
  <svg viewBox="0 0 150 50" width="300" height="100">
    <a xlink:href="#alpha">
      <circle cx="25" cy="25" r="15" />
    </a>
    <a xlink:href="#bravo" class="outline">
      <circle cx="60" cy="25" r="15" />
    </a>
    <a xlink:href="#charlie" class="stroke">
      <circle cx="95" cy="25" r="15" />
    </a>
  </svg>
  
  <h2>Complex Bounding Box</h2>
  <svg viewBox="0 0 150 50" width="300" height="100">
    <a xlink:href="#alpha">
      <circle cx="25" cy="25" r="15" />
      <circle cx="140" cy="40" r="3" />
    </a>
    <a xlink:href="#bravo" class="outline">
      <circle cx="60" cy="25" r="15" />
      <circle cx="140" cy="40" r="3" />
    </a>
    <a xlink:href="#charlie" class="stroke">
      <circle cx="95" cy="25" r="15" />
      <circle cx="140" cy="40" r="3" />
    </a>
  </svg>
</body>
</html>
 
circle {
  fill: springgreen;
}
.outline:focus {
  outline: 5px solid red;
}
.stroke:focus {
  outline: none;
  stroke-width: 5px;
  stroke: magenta;
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers