简而言之，我有一个饼图图形，当单击一个段时，它应该打开一个花哨的框覆盖层。我尝试使用效果良好的map，但它不是 100% 准确，边缘不圆润，我无法应用任何悬停样式。
因此，我决定创建一个 SVG，并在图形顶部使用饼图段(路径(。这意味着 SVG 路径现在与饼图上的形状完全匹配。以下是 SVG 的代码：
<figure class="align-center">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 760 580" xml:space="preserve">
<image xlink:href="../../img/content/diagrams/background-graphic.png" x="0" y="0" height="580px" width="760px" />
<path class="st0" d="M251.9,456.4C287.4,483.7,331.8,500,380,500c11.8,0,23.3-1,34.6-2.8L380,290L251.9,456.4z" />
<path class="st0" d="M380,80c-116,0-210,94-210,210c0,67.8,32.1,128,81.9,166.4L380,290V80z" />
<path class="st0" d="M527.3,439.6C566,401.6,590,348.6,590,290c0-116-94-210-210-210v210L527.3,439.6z" />
<path class="st0" d="M380,290l129.3,165.5c6.3-4.9,12.3-10.2,18-15.8L380,290z" />
<path class="st0" d="M414.6,497.2c35.3-5.9,67.7-20.5,94.8-41.7L380,290L414.6,497.2z" />
</svg>
</figure>
现在我需要以某种方式使path元素的行为像锚点。您可以向map中的area元素添加href，但似乎无法使用 SVG 执行此操作？
隐藏内容的标记很简单，如下所示：
<div id="overlay-1" class="hide">
<h3>Overlay title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
通常的行为是，一旦单击具有相应 href 值的对象，就会打开。
如果有这样的事情，最好的做法是什么？
如果您可以将单击事件附加到您的元素，那么就没有理由不能使用它来触发 fancyBox。
如果使用 fancyBox v3，只需添加data-src和data-fancybox属性。
例：
<path data-fancybox data-src="https://farm4.staticflickr.com/3953/15594397982_477385f90d_b_d.jpg" class="st0" d="M251.9,456.4C287.4,483.7,331.8,500,380,500c11.8,0,23.3-1,34.6-2.8L380,290L251.9,456.4z" />
演示 - https://codepen.io/anon/pen/vJreVd?editors=1000
另一种解决方案是为路径元素创建自定义点击事件并手动调用 fancyBox。演示 - http://jsfiddle.net/ymhvdeqy/1/