Question

我有一个非常大的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事件，该如何处理呢？

有什么主意吗？

如何处理对象标记随附的svg文件

0 个答案: