Question

如果我有一个以上带有标记的SVG，则仅显示第一个SVG的标记。我希望在两个SVG中看到标记。

只有我有CSS才能将其作为工具提示（仅在悬停时出现）才会出现这种情况。

e.g。

<!DOCTYPE html>
<html>
<body>

<style>
.tt svg
{
 display: none;
 position: absolute; 
 border: 1px black solid;
}

.tt:hover svg
{
 display: inline;
}
</style>

<p class="tt">aaa
 <svg width="100px" height="100px" style="border: 1px solid red;">
 <marker id='head' orient="auto" markerWidth="2" markerHeight="4"      
  refX="0.1" refY="2">
 <path d='M0,0 V4 L2,2 Z' fill="grey"/></marker>
 <line x1="20" y1="40" x2="70" y2="40" stroke="grey" stroke-width="3px"  
  marker-end="url(#head)"/>     
</svg>


<p class="tt">bbb
 <svg width="100px" height="100px" style="border: 1px solid red;">
  <marker id='head' orient="auto" markerWidth="2" markerHeight="4"  
   refX="0.1" refY="2">
  <path d='M0,0 V4 L2,2 Z' fill="grey"/></marker>
  <line x1="20" y1="40" x2="70" y2="40" stroke="grey" stroke-width="3px" 
   marker-end="url(#head)"/>     
</svg>

</body>
</html>

两个SVG都是一样的。

你可以看到当悬停在“bbb”上时，第二个SVG中没有标记。

我尝试使用多个浏览器并且效果始终相同 - 所以我认为这是我的标记错误。

如果我删除CSS（例如在CSS中将tt重命名为ttt），但是我没有工具提示效果，它就可以了。

如果我在其中一个SVG中使用不同的marker-id（例如head1），它也可以工作。

为什么？

谢谢，克里斯

CSS，SVG：行/路径标记不能按预期工作

0 个答案: