打开fancybox的可点击SVG路径答案

【问题标题】：Clickable SVG paths to open fancybox打开fancybox的可点击SVG路径
【发布时间】：2017-08-23 13:07:46
【问题描述】：

简而言之，我有一个饼图图形，当单击一个段时，它应该打开一个花式框覆盖。我尝试使用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 值的对象就会打开。

最好的做法是什么 - 如果有这样的事情？

【问题讨论】：

将每个路径包装在标记中。
这适用于 URL，但我尝试加载的内容是在使用 fancybox 的隐藏 div 中。使用引用我要显示的内容的 ID 的 href 将路径包装在 am 锚点中不起作用，并在控制台中给出 Uncaught TypeError 错误。
您可以运行 javascript 在单击锚点时取消隐藏花式框。
Fancybox 通常会自动执行此操作，但在 SVG 中时显然不会。不幸的是，我无法更新 fancybox.js 或触发显示框的脚本，因为 1 个文件在 5 个不同的应用程序中使用。因此，改变这一点可能会破坏其他应用程序的工作原理。 ://

标签： svg fancybox anchor imagemap clickable

【解决方案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/

【讨论】：

不幸的是版本是 2.1.5。不确定我可以更新它，因为它是多个应用程序的核心 JS 文件，所以它可能会破坏其他所有内容，可悲的是！太可惜了，我不能使用它，因为它看起来很棒。
您可以手动添加href属性并应用fancyBox，例如使用$('path').fancybox()（选择您自己的选择器）
会这样工作吗：<path href="$('#overlay-1').fancybox()" d="" /> 只是我无法让它工作。尝试添加class="fancybox"。再次感谢。
不，那样不行 :) 例如，像这样的东西 - <path href="#overlay-1" class="st0" .. 然后放在某个地方 $('.st0').fancybox();
我已经尝试过了，在页面底部使用$('.class').fancybox();（在fancybox js之后），但点击时我收到一个控制台错误，例如：Uncaught TypeError: element.prop(...).match is not a function - 也许它不能使用路径？也许我需要重新考虑一下！ :)