1. 首页
  2. css

CSS单击SVG元素以聚焦(和样式)

一位读者写道:
您的站点上是否有任何东西向我展示了如何使用CSS使SVG可点击?如中所示,我有一个SVG,我点击它的一部分,它应该显示元素的那一部分的轮廓?星期二我有一个电话面试,想找一份远程SVG插画师的工作,我不想看起来像火鸡。
假设我有一个美国的,它是这样的:

Each state then is kind of a direct descendant of the ,选择器应该是svg.us > *。
通常,当我认为\”可点击\”时,我认为是JavaScript。下面是我们如何观察每个状态的点击。我们还将对单击的状态应用一个类:
var>
That class will do the styling for us. You mentioned an outline, so let\”s do that and a fill color as well:
.on {fill: pink;stroke: red;stroke-width: 2;}
Tada!
但您确实明确地说了\”使用CSS可单击\”。这有点棘手。通常我们在CSS中有:focus,但我不认为有任何尝试过的方法可以使SVG元素本身具有可聚焦性。很久以前就有人谈论过一个focusable属性,但我想那是不可能的。HTML的方式是tabindex,我相信它在一些浏览器中是有效的,但是我们不能指望它。我认为最好的方法是在SVG中使用锚定(是的,我们也可以在SVG中使用它们!)在所有浏览器中都是可聚焦的。然后将:focus样式应用于锚定,锚定将级联到形状中。
阿米莉亚·贝拉米·罗伊斯(Amelia Bellamy Royds)就是在StackOverflow线程中这样做的。这是我的略显简化的版本:

a:focus {fill: pink;stroke: red;stroke-width: 1;}
应该可以做到:

CSS单击SVG元素以聚焦(和样式) 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8d%95%e5%87%bbsvg%e5%85%83%e7%b4%a0%e4%bb%a5%e8%81%9a%e7%84%a6%ef%bc%88%e5%92%8c%e6%a0%b7%e5%bc%8f%ef%bc%89/