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中的area元素添加map，但似乎您无法使用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

如果你可以将click事件附加到你的元素，那么没有理由不能用它来触发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

1 个答案: