可点击的 SVG 路径以打开 fancybox

Question

简而言之，我有一个饼图图形，当单击一个段时，它应该打开一个 fancybox 覆盖。我尝试使用 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 元素表现得像一个锚点。您可以将 href 添加到 map 中的 area 元素，但您似乎无法使用 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 值的对象后打开。

最好的做法是什么 - 如果有的话？

Answer 1

如果你能给你的元素附加点击事件，那么就没有理由不能用来触发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/

可点击的 SVG 路径以打开 fancybox

Clickable SVG paths to open fancybox

svg

fancybox

anchor

imagemap

clickable