css - SVG 元素列表

Question

我正在尝试做一些看起来像我添加的片段但带有 svg 圆圈的东西，我是否可以将我的 svg 圆圈放在列表中？我希望当我将鼠标悬停在我的圈子中时出现该框

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li>Tyrion<span>Lannister</span></li>
  <li>Loras<span>Tyrell</span></li>
  <li>Gregor<span>Clegane</span></li>
  <li>Brandon<span>Stark</span></li>
  <li>Daenerys<span>Targaryen</span></li>
  <li>Oberyn<span>Martell</span></li>
</ul>

Answer 1

只需用 SVG 圆圈替换文本，您应该使用现有的 CSS 获得相同的功能:

<li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>

片段:

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

svg {
  height: 1.5em;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Clegane</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Stark</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Targaryen</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Martell</span></li>
</ul>