将 md-tooltip 添加到 SVG 图表？答案

【问题标题】：Adding md-tooltip to a SVG chart?将 md-tooltip 添加到 SVG 图表？
【发布时间】：2016-04-07 05:08:41
【问题描述】：

这是一个例子：

<svg>
    <g ng-repeat="rect in rectList">
        <rect ng-attr-fill="rect.fill"
              ng-attr-x="rect.x"
              ng-attr-y="rect.y"
              ng-attr-width="rect.width"
              ng-attr-height="rect.height"></rect>
    </g>
</svg>

我想为每个矩形添加一个<md-tooltip>。我能以某种方式做到吗？我说的是Angular Material Tooltip，而不是来自其他库的任何其他工具提示实现。

【问题讨论】：

文档说md-tooltip 需要附加到您要在其上显示工具提示的元素。但是所讨论的语言是 SVG，它对其中允许的内容和不允许的内容非常挑剔。 <rect> 元素中不能有任何子元素。另外，这个角度指令似乎不能是属性指令。再说一次，SVG 很挑剔。我已经尝试了几件事，但我无法让它工作。所以我想如果其他人尝试这样做并成功了，他可以分享他的榜样。
我真的不明白添加我尝试过的示例的意义，但你去吧：jsfiddle.net/baby4w3e
当然不是，哈哈。我正在向您展示代码示例，而不是应该工作的实际演示。

标签： angularjs svg tooltip angular-material

【解决方案1】：

尝试将其包装在 div 中并应用 md-tooltip

<div ng-repeat="status in statuses">
   <md-tooltip md-direction="right">
     {{status.description}}
    </md-tooltip>     
<svg >
   <rect width="300" height="100"   >
   </rect>          
</svg>
</div>

这是工作的Sample

【讨论】：

小提琴似乎对我不起作用。但是通过查看代码，这是行不通的。您基本上是在此处创建多个 SVG 图表。我提供的 SVG 块只是我使用的更大 SVG 的一部分，里面有很多东西，所以我不能创建多个 SVG。我真的只需要将工具提示应用于<rect> 元素。如果需要，我可以用另一个<g> 包围<rect>，但仅此而已。