问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

 <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> 元素中包含文本？

原文由 Spedwards 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcsssvg
阅读 1k
2 个回答
得票最新
社区维基
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>

原文由 shipshape 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1
 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>

原文由 mugu 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏