点击SVG元素显示CSS风格

一位读者写道：

有什么东西在您的网站上显示我如何做一个SVG点击使用CSS？因为，我有一个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.us > *。

通常，当我想“点击”，我认为JavaScript。在这里，我们可以看到在每个状态下。我们也会将一类状态点击：

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

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

这类将为我们做造型。你提到的概述，让我们做，填充颜色为好：

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

但是你说的“可点击使用CSS”具体。这是一个小技巧。通常我们有焦点在CSS中，但我不认为有任何试图使一个SVG元素本身可真路。有人说（很久以前）一个可调焦属性，但我认为那是了。HTML的方式是我认为作品中的作用，一些浏览器，但我们不能指望它。我认为最好的办法是在SVG使用锚（是的，我们可以使用SVG也！）这是可在所有的浏览器。然后应用焦点风格定位级联成的形状。

Amelia贝拉米罗伊兹就这在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;
}

原文：https://css-tricks.com/click-svg-to-focus/

转载请注明：TUTERM.COM » 点击SVG元素显示CSS风格