单击可打开fancybox的SVG路径

简而言之，我有一个饼图图形，当点击一个片段时，它应该会打开一个fancybox覆盖图。我尝试使用

贴图

，效果很好，但不是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>

通常的行为是，单击具有相应href值的对象后，此操作将打开

---

这方面的最佳实践是什么？如果有这样的事情？

如果可以将click事件附加到元素，那么就没有理由不能使用它来触发fancyBox

如果使用fancybox v3，只需添加

data src

和

data fancybox

属性即可

例如：

演示-

---

另一个解决方案是为path元素创建自定义单击事件，并手动调用fancyBox。演示-

如果可以将click事件附加到元素，那么就没有理由不能使用它来触发fancyBox

如果使用fancybox v3，只需添加

data src

和

data fancybox

属性即可

例如：

演示-

---

另一个解决方案是为path元素创建自定义单击事件，并手动调用fancyBox。演示-

不幸的是，版本是2.1.5。我不确定我是否可以更新它，因为它是多个应用程序的核心JS文件，所以它可能会破坏其他一切，很遗憾！太遗憾了，我不能使用它，因为它看起来很棒。你可以添加

href

属性并手动应用fancyBox，例如，使用

$（'path'）。fancyBox（）

（选择你自己的选择器）会这样工作：

，只是我无法让它工作。还添加了

class=“fancybox”

尝试。再次感谢。不，它不是这样工作的：）例如，类似这样的东西-

我用
$（'.class'）.fancybox（）尝试过在页面底部（在fancybox js之后），但单击会出现控制台错误，如：
uncaughttypeerror:element.prop（…）.match不是一个函数
-可能它无法处理路径？也许我需要重新考虑一下！：）不幸的是，这个版本是2.1.5。我不确定我是否可以更新它，因为它是多个应用程序的核心JS文件，所以它可能会破坏其他一切，很遗憾！太遗憾了，我不能使用它，因为它看起来很棒。你可以添加
href
属性并手动应用fancyBox，例如，使用
$（'path'）。fancyBox（）
（选择你自己的选择器）会这样工作：
，只是我无法让它工作。还添加了
class=“fancybox”
尝试。再次感谢。不，它不是这样工作的：）例如，类似这样的东西-
我用
$（'.class'）.fancybox（）尝试过在页面底部（在fancybox js之后），但单击会出现控制台错误，如：
uncaughttypeerror:element.prop（…）.match不是一个函数
-可能它无法处理路径？也许我需要重新考虑一下！：）将每个路径包装在一个标记中。这适用于URL，但我尝试加载的内容使用fancybox隐藏在一个隐藏的div中。在am anchor中使用引用我要显示的内容ID的href包装路径不起作用，并且在控制台中会出现
Uncaught TypeError
错误。单击锚时，您可以运行javascript来取消隐藏fancybox。fancybox会自动执行此操作，通常情况下，但在SVG中显然不会。不幸的是，我无法更新fancybox.js或脚本，因为1文件在5个不同的应用程序中使用，因此会触发一个显示框。因此，改变这一点可能会破坏其他应用程序的功能：/将每个路径包装在一个标记中。这适用于URL，但我尝试加载的内容使用fancybox隐藏在一个隐藏的div中。在am anchor中使用引用我要显示的内容ID的href包装路径不起作用，并且在控制台中会出现
Uncaught TypeError
错误。单击锚时，您可以运行javascript来取消隐藏fancybox。fancybox会自动执行此操作，通常情况下，但在SVG中显然不会。不幸的是，我无法更新fancybox.js或脚本，因为1文件在5个不同的应用程序中使用，因此会触发一个显示框。因此，改变这一点可能会破坏其他应用程序的功能：/
<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>