我有一个非常大的svg文件,当它包含在<object>
标签中时,我希望能够对其进行操作。
如果我以内联方式包含它,效果很好,但是它确实很大,我想避免这种情况。
在我的主要html
文件中,它包括以下内容:
<object type="image/svg+xml" data="/assets/img/banner.svg"></object>
banner.svg
文件的一部分如下:
<svg id="svgholder" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 768">
<g id="zone-1" data-id="zone-1">
<g id="i551-91" data-name="i551">
<polygon class="cls-6" points="308.74 200.43 310.79 199.4 307.71 197.86 305.65 198.89 308.74 200.43" />
<polygon class="cls-6" points="304.63 202.48 307.71 200.94 304.63 199.4 301.54 200.94 304.63 202.48" />
<polygon class="cls-6" points="300.52 209.68 303.6 208.14 301.54 207.11 300.52 207.62 298.46 206.59 296.41 207.62 300.52 209.68" />
</g>
.....
.....
<g id="zone-2" data-id="zone-2">
<g>
<polygon class="cls-6" points="308.74 197.35 341.62 213.79 308.74 230.23 275.85 213.79 308.74 197.35" />
<polygon class="cls-7" points="308.74 197.35 341.62 213.79 308.74 230.23 275.85 213.79 308.74 197.35" />
</g>
....
</svg>
我希望能够点击其中一个区域(zone-1, zone-2
),并对该点击事件进行操作。
我这样做如下:
$("[id=zone-1]").on("click", function (e) {
e.preventDefault();
// DO SOMETHING
});
这样,当svg内联包含在我的主要html文件中时,它可以工作,但是如果我在<object>
标签中添加了svg事件,该如何处理呢?
有什么主意吗?