0

I have a really big svg file and I want to be able to manipulate it when it's included within an <object> tag.

If I include it inline it works fine, but it's really big and I want to avoid that.

In my main html file I include it as follows:

<object type="image/svg+xml" data="/assets/img/banner.svg"></object>

One part of the banner.svg file is as follows:

<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>

I want to be able to click on one of those zones (zone-1, zone-2) and to do something on that click event.

I do it as follows:

$("[id=zone-1]").on("click", function (e) {
    e.preventDefault();
    // DO SOMETHING
});

That way it works when the svg is included inline in my main html file, but how can I be able to do on click event if I include it with <object> tag?

Any idea?

CodeBoyCode
  • 2,227
  • 12
  • 29
Boky
  • 11,554
  • 28
  • 93
  • 163
  • I think you should check this post : https://stackoverflow.com/questions/8798745/how-to-get-html-elements-from-an-object-tag – ecavard Sep 25 '18 at 13:10
  • [This article by Sara Soueidan(https://www.sarasoueidan.com/blog/optimizing-svg-delivery-with-svg/) may give you some ideas. Basically she save large parts of the SVG as .svg files and reuse those images within an `` element inside an inline SVG. I think this is a very interesting idea, and may be applicable to your case. – enxaneta Sep 25 '18 at 13:56

0 Answers0