The click interactions of SVG elements are altered when switching between <img> and <object> elements

Question

The click interactions of SVG elements are altered when switching between <img> and <object> elements

I currently have 4 SVG buttons featured in the main menu of my personal website.

https://i.stack.imgur.com/gA7En.png

/----------------------------------------------------------------------------------------------------------------------------------/

Upon clicking one button, all 4 buttons retract to the corners and reveal the corresponding section (e.g. Clicking "AboutMe" reveals the AboutMe section). https://i.stack.imgur.com/5CK9v.png

Initially, I embedded the SVG objects within an img tag:

<img class = "button active" id = "person-icon" src = "resources/main-page-icons/person-icon.svg"/>

This method was chosen because it was thought unnecessary to embed the SVG in an object or embed tag when no animation was required. However, upon deciding to add a hover effect to the SVG element, the img tag had to be changed to an object for styling and animating:

<object class = "button active" id = "person-icon" data = "resources/main-page-icons/person-icon.svg" type = "image/svg+xml"></object>

While the hover effect functioned correctly, the SVG became unclickable. It was discovered that clicks were registering on the SVG itself rather than the object it was embedded in. Even wrapping it in a div did not resolve the issue.

Question: Is there a way to animate the SVG element while also handling click events on the object element in which it is embedded?

In anticipation of the question "Why not handle the click event within the SVG element?" It was believed that allowing an SVG element's behavior to impact other elements would be illogical. For this reason, click events were managed OUTSIDE of the SVG element initially (e.g. clicking one button expands others, fades in content = undesirable). While potential solutions may exist, the original approach was deemed most appropriate at the time.

Thank you in advance for any assistance provided.

html css svg graphics click

Answer 1

Answer №1

After spending some time searching on Google, I finally discovered the solution here:

In order for this type of tag to display on the page, it requires some content.

Your tag:
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>
does not contain any inner HTML-Content, making it unclickable.

The issue lies in objects needing a form of innerHTML to be recognized by the DOM. By adding text such as

<object>Zoot!</object>

, the object becomes clickable. It's important to note that the SVG DOM functions differently than the HTML DOM and does not support innerHTML. More information on this topic can be found here.

To work around this problem, I opted for using an image tag enclosed in a div that allows for animation and styling. While this solution works well overall, I encountered an issue with shape distortion when applying transformations to a circular div (border-radius: 50%). The distortion is noticeable, especially when a background/border is included. This particular challenge will require a separate post!

Answer 2

After spending some time searching on Google, I finally discovered the solution here:

In order for this type of tag to display on the page, it requires some content.

Your tag:
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>
does not contain any inner HTML-Content, making it unclickable.

The issue lies in objects needing a form of innerHTML to be recognized by the DOM. By adding text such as

<object>Zoot!</object>

, the object becomes clickable. It's important to note that the SVG DOM functions differently than the HTML DOM and does not support innerHTML. More information on this topic can be found here.

To work around this problem, I opted for using an image tag enclosed in a div that allows for animation and styling. While this solution works well overall, I encountered an issue with shape distortion when applying transformations to a circular div (border-radius: 50%). The distortion is noticeable, especially when a background/border is included. This particular challenge will require a separate post!

Answer 3

Answer №2

One reason for this behavior is that events occurring on framed documents do not bubble up to the main document due to security concerns.
The content within an <object> element is considered a framed document and is subject to these restrictions as well.

To address this issue, you can attach the event directly to the element's contentWindow or any element within its contentDocument.

However, it should be noted that the document will remain inaccessible for cross-domain resources loaded into the element.

In cases where users have set focus on the element using keyboard navigation like the Tab key, there may be some false positives when trying to detect the current active element.

function attachClickEvent(obj, callback) {
  // no cross-domain restrictions
  if (obj.contentWindow) {
    obj.contentWindow.addEventListener('click', function() {
      callback();
    });
  } else {
    // workaround solution
    window.addEventListener('blur', function() {
      // activeElement may not have been updated yet
      requestAnimationFrame(function() {
        // check that our element is the active one
        if (document.activeElement === obj) {
          callback();
          // so we can detect it multiple times
          obj.blur()
        }
      });
    });
    // setting focus on the document
    var inp = document.createElement('input');
    inp.style.position = 'absolute';
    inp.style.opacity = 0;
    document.body.appendChild(inp);
    inp.focus();
    document.body.removeChild(inp);
  }

};

// call it when the element has loaded
crossDomain.onload = function() {
  attachClickEvent(this, function() {
    snippet.log('clicked on the doc')
  })
};
// handling UA case where load event may already have fired
crossDomain.data = crossDomain.data;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<object width="200px" id="crossDomain" data="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"></object>

Answer 4

One reason for this behavior is that events occurring on framed documents do not bubble up to the main document due to security concerns.
The content within an <object> element is considered a framed document and is subject to these restrictions as well.

To address this issue, you can attach the event directly to the element's contentWindow or any element within its contentDocument.

However, it should be noted that the document will remain inaccessible for cross-domain resources loaded into the element.

In cases where users have set focus on the element using keyboard navigation like the Tab key, there may be some false positives when trying to detect the current active element.

function attachClickEvent(obj, callback) {
  // no cross-domain restrictions
  if (obj.contentWindow) {
    obj.contentWindow.addEventListener('click', function() {
      callback();
    });
  } else {
    // workaround solution
    window.addEventListener('blur', function() {
      // activeElement may not have been updated yet
      requestAnimationFrame(function() {
        // check that our element is the active one
        if (document.activeElement === obj) {
          callback();
          // so we can detect it multiple times
          obj.blur()
        }
      });
    });
    // setting focus on the document
    var inp = document.createElement('input');
    inp.style.position = 'absolute';
    inp.style.opacity = 0;
    document.body.appendChild(inp);
    inp.focus();
    document.body.removeChild(inp);
  }

};

// call it when the element has loaded
crossDomain.onload = function() {
  attachClickEvent(this, function() {
    snippet.log('clicked on the doc')
  })
};
// handling UA case where load event may already have fired
crossDomain.data = crossDomain.data;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<object width="200px" id="crossDomain" data="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"></object>

The click interactions of SVG elements are altered when switching between <img> and <object> elements

Answer №1

Answer №2

Similar questions

Reading values from a properties file using HTML

Customize your Bootstrap 4 accordion cards with added margin and a sleek design without the usual bottom

If the text is too wide for the parent div width, wrap it in a child div

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

The "Location..." header always points me back to the same destination

What are the steps to add a Search Box to my HTML Website?

The Python socket fails to receive a valid response after sending an HTTP 1.1 CONNECT request

Customize the position of the date picker for HTML native <input type="date">

What is the best method to deactivate zoom in/out buttons using JavaScript?

Dynamic content alongside a stationary sidebar that adjusts in width

Field for user input along with a pair of interactive buttons

Adjust the dimensions of the dropdown menu

What improvements does IE7 offer compared to IE6?

Bootstrap-tour is incompatible with a row within a table structure

Fancybox overlay not adjusting to full height

Remove the concluding statement from the HTML string if it exceeds the capacity of the iPhone's webView

"Adding a large amount of HTML using .append() is causing slow performance in Internet Explorer 10

Instructions for including a script and stylesheet exclusively on a single page of a website

Angular 2 Typeface Delivery to the Server

Automatically generating new lines of grid-template-columns with CSS grid