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

What is the best way to position a tooltip near an element for optimal visibility?

The problem with clearing floats in IE7 (as well as 6)

Is there a way to use JavaScript to switch the entire div on and off

Achieving equal alignment of items with flexbox

Changing the image's flex-grow property will take precedence over the flex settings of other child

Using HTML to execute a JavaScript function that transforms images

Verify if a checkbox is selected upon loading the page

Working with radio buttons in a loop using PHP

Switchable radio options

Troubleshooting problem: Scrolling problem in IE7 and IE8 with Lightbox

Having trouble with adding the copy to clipboard feature

Understanding the behavior of the enter key in Angular and Material forms

The Bootstrap Tooltip seems to be glued in place

What is the process for dynamically assigning a color picker hex value as HTML attributes in PHP?

How can we convert unpredictable-length JSON user input into well-structured HTML code?

Changing a background image url using jQuery by clicking a button

A method for calculating the product of two selected numbers and then adding them together

The submission button in Bootstrap 3 becomes disabled upon clicking, preventing the data from being successfully transferred to the database

What is the best way to apply CSS to my HTML code?

Is there a way to make the Sweetalert2 alert appear just one time?