Question

所以我有一个简单的SVG元素（在下面复制），当我想要显示带有data-label类的矩形时，显示文本（当前在bar属性内）。

<svg width="511" height="15">
    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
    <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
</svg>

SVG中可能有任意数量的矩形，标签可以说什么。

因为在我的情况下，整个SVG元素是用JavaScript创建的，然后打印到HTML环境，我可以将标签移动到任何地方。我只是希望标签在悬停时出现在矩形上方或上方。

这是否可行，因为您无法在<rect>元素中包含文字？

Answer 1

这样的东西？您可以使用g对元素进行分组。

svg text {display: none;}
svg g:hover text {display: block;}

<svg width="511" height="15">
    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
    <g>
      <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
      <text x="0" y="15">Label 1</text>
    </g>
</svg>

Answer 2

试试这个，我认为这是更方便的方法：

nav {
    position: absolute;
    top:-11px;
}

ul {
    position: relative;
}
nav li {
    display:inline;
}
nav a {
    display:inline-block;
    visibility: hidden;
    padding-right:5px;
    text-decoration:none;
    color: white;
}
ul li:hover a {
    visibility:visible;
}

<svg width="511" height="15">
  <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
  <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
</svg>
<nav>
  <ul>
   <li><a href="#">text_one</a></li>
   <li><a href="#">text_two</a></li>
   <li><a href="#">text_three</a></li>
  </ul>
</nav>

Answer 3

解决问题的另一种方法：

	rect:hover + text{
		display :block
	}

<svg width="511" height="15">
	<rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
	<rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
	<text style="display:none" x="0" y="15">Label 1</text>
</svg>

Answer 4

div>svg:hover {
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.589);
  transform: scale(1.2);
  transition: all 0.2s ease-in-out;
}

div>svg {
  margin: 10px 14px;
  padding: 8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

<html>
<script src="//at.alicdn.com/t/font_1652933_iyos793o7jk.js"></script>

<body>
  <div title="?mypen">
    <svg id='drawpen' class="ative" aria-hidden="true">
       <use xlink:href="#icon-huabi"></use>
   </svg><br>
  </div>
</body>
</html>

在悬停上显示SVG元素上的文本

4 个答案: