点击 SVG 元素以聚焦（并设置样式）

一位读者写道

您的网站上是否有任何内容可以向我展示如何使用 CSS 使 SVG 可点击？例如，我有一个 SVG，点击其中一部分，它应该显示该元素部分的轮廓？我周二有一个远程 SVG 插画师的电话面试，我不想表现得像个笨蛋。

假设我有一个美国的 <svg>，它像这样

<svg class="us" viewBox="0 0 500 400">

  <path d="..." class="wisconsin" />

  <polygon points="..." class="colorado" />

  <g class="michigan">
    <path d="..." class="michigan--up">
    <path d="..." class="michigan--main">
  </g>

  <!-- etc -->

</svg>

然后每个州都是 <svg> 的直接后代，选择器将是 svg.us > *。

通常，当我想到“可点击”时，我会想到 JavaScript。以下是我们可以监视每个州点击的方式。我们还将对点击的州应用一个类

var allStates = $("svg.us > *");

allStates.on("click", function() {
  
  allStates.removeClass("on");
  $(this).addClass("on");
  
});

该类将为我们完成样式设置。您提到了轮廓，因此我们也将其与填充颜色一起设置

.on {
  fill: pink;
  stroke: red;
  stroke-width: 2;
}

搞定！

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 点击州以激活。

但您确实特别说“使用 CSS 可点击”。这有点棘手。通常我们在 CSS 中使用 :focus，但我认为没有任何经过验证的方法可以使 SVG 元素本身可聚焦。很久以前有人讨论过 focusable 属性，但我认为它已经失效了。HTML 方法是 tabindex，我相信它在某些浏览器中有效，但我们不能依赖它。我认为最好的方法是在 SVG 中使用锚点（是的，我们也可以在 SVG 中使用它们），这些锚点在所有浏览器中都可聚焦。然后将 :focus 样式应用于锚点，该样式会级联到形状中。

Amelia Bellamy-Royds 在 StackOverflow 线程中就是这样做的。这是我稍微简化后的版本

<svg viewBox="0 0 95 50">
  <a xlink:href="#0">
    <circle cx="20" cy="25" r="5" data-Name="shape 1" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="40" cy="25" r="5" data-Name="shape 2" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
  </a>
</svg>

a:focus {
  fill: pink;
  stroke: red;
  stroke-width: 1;
}

这应该可以解决问题

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 具有可聚焦元素的 SVG。