Unable to modify the innerHTML of an SVG element in Internet Explorer

I am facing an issue where I cannot modify the SVG code using JavaScript in Internet Explorer.

When I inspect the element on IE and select the svg, it only displays:

<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 0 0" preserveAspectRatio="xMidYMid meet" type="shape"><g /></svg>

The JavaScript code snippet I tried to use was:

document.getElementsByTagName("svg")[0].innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880">
<rect width="100%" height="100%" fill="rgb(255,255,255)"/><rect x="0" y="0" width="81" height="81" fill="rgb(179,146,5)"/><rect x="560" y="160" width="81" height="81" fill="rgb(67,123,235)"/><rect x="0" y="80" width="81" height="81" fill="rgb(0,0,0)"/><rect x="80" y="80" width="81" height="81" fill="rgb(0,0,0)"/>
</svg>';

In a browser like Chrome, the svg renders correctly, however, in Internet Explorer, the visualization is just blank.

javascriptsvg

Answer №1

When using the code snippet provided by @enxaneta and @thebabydino, you can easily modify an SVG group's content by setting group.textContent = 'string'. This change won't trigger a re-render in the browser. To successfully add an SVG within an HTML element, it is recommended to update the innerHTML of the parent element.

document.querySelector('.clear').addEventListener('click', function () {
  document.querySelector('g').textContent = '';
});

document.querySelector('.add').addEventListener('click', function () {
  document.querySelector('div').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880"><g><rect x="100" y="100" width="100" height="100" fill="rgb(67,123,235)"/></g></svg>';
});
<button class="clear">Clear</button>
<button class="add">Add</button>
<div> 
  <svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880">
    <g>
      <rect x="100" y="100" width="100" height="100" fill="rgb(67,123,235)"/>
    </g>
  </svg>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detect Empty Fields as Invalid in Angular 2+ Form Validation

I have been implementing Form Validations in my form using reactive form validation. However, I encountered a challenge when checking a field that is touched and dirty. For example: HTML: <input id="name" class="form-control" formControlName="n ...

javascripthtmlangulartypescript

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

javascriptphphtmlmysql

Move the window positioning from the lower section to the center

Is there a way to make images appear when they are at 75% or in the middle of the window instead of waiting for them to be fully in view? How can I achieve this? $(window).on("load",function() { function fade(pageLoad) { var min = 0; ...

javascriptjquery

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

javascripthtmlangularjscanvaskineticjs

Modifying object parameters in an array based on their similarity: A guide

I've encountered an array of objects like this: const data = [ { position: 1, name: "a", score: 9000 }, { position: 2, name: "b", score: 8000 }, { position: 3, name: "c", score: 6000 }, { position: 3, name: " ...

javascriptarrays

PHP function - retrieving the beginning element in the array that is returned for every row

My current database setup involves a MySQL DB with approximately 100 rows. Within each row, there is a list of items stored in a column within the table. The challenge I am facing is extracting the first item from this list in each row. For example, if the ...

javascriptarrays

What is the most effective way to declare a variable in TypeScript when assigning it within a class?

Is there a more efficient way to define the class variable accountHandler without using any? main.ts private accountHandler: any= {}; private requestLOB: string[] = []; constructor() { if (process.env.ENABLEBackendSwitch === "true&q ...

javascriptnode.jstypescript

What is the mechanism Angular utilizes to determine the exact location of directives within a webpage?

Can you explain how Angular is able to locate the directives on a webpage and establish connections with or observe those elements? I've searched through the DOM reference, but it seems like methods like getElementbySomething and querySelectorAll may ...

javascriptangularjs

Switch out the "Wishlist" button for the "Add to Cart

While managing my Opencart store, I encountered a requirement to replace the "Add to Wishlist" button with an "Add to Cart" button on the product page. After making changes to the code, the appearance of the button was successfully updated. CODE ...

javascriptphpopencart

Tips for managing object references in elasticsearch mongo river and how to resolve them effectively

Can I flatten or resolve references from other collections before indexing into Elasticsearch? For instance, consider this schema: var PartSchema = new mongoose.Schema({ title: { type: String, required: true }, province : { type : mongo ...

javascriptmongodbelasticsearch

Implementing conditional statements using jQuery for multiple selections

Having two unique IDs, I am planning to set a condition that corresponds with my query. $("#foo", "#bar").foo.bar({ baz: function() { if(selector == "#foo") { console.log("foo"); } else { console.log("bar"); } } }); ...

javascriptjquery

Warning: Angular.js encountered a max of 10 $digest() iterations while iterating through array slices. Operation aborted

JSbin: http://jsbin.com/oxugef/1/edit I am attempting to slice an array into smaller subarrays and iterate through them in order to create a table of divs that are evenly divided. Unfortunately, there seems to be an issue where I am unknowingly overwritin ...

javascriptangularjs

Transferring information between pages in PHP

Currently, I am exploring the most effective way to pass data between two pages (Page A to Page B) using PHP for a specific scenario: Page A: This page displays a gallery of images with titles. The PHP file makes a database call to an images table, which ...

javascriptphphtmlperformance

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3

"implement customer" import React, { useState } from "react"; import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; export default function HeroSlider() { const images = [ "/images/homepage/home-1.jpeg&qu ...

javascriptreactjsnext.jscomponents

Having trouble retrieving accurate text information from a JavaScript link

I am encountering an issue with my code which consists of links with divs inside them. When I click on a link, it should display another div with data for "Case No" and "Type". However, the problem is that it only fetches the data from the first link click ...

javascripthtml

Transforming Data into Columns with ES6 and TypeScript Using Index Signatures

Seeking a solution to transform/pivot the given data structure: const dataReceived: IOrder[] = [ {customerName: 'Customer 1', customerId: '1',auctionName: 'Auction 1', auctionId: '1', statusName: 'Awaiting&a ...

javascriptreactjstypescriptecmascript-6index-signature

Encapsulate ng-style within quotation marks

I am trying to hide a span if the value of filters[*index*] is empty. var span = "<span ng-style='{ 'display': filters[" + filterIndex + "] == '' ? 'none' : 'inline-block' }'></span>" cell.html ...

javascriptangularjs

Is it possible to overlay color on top of a div background? (i.e. modify div color without altering the 'background-color' property)

Can you apply a color "on top of" a div's background? I'm looking to change the displayed color of a div without altering the 'background-color' value. I need to keep the background-color for comparison when divs are clicked: var pick ...

javascriptjquerycsshtmlbackground-color

How to Retrieve the Access Token from Instagram using Angular 2/4/5 API

I have integrated Instagram authentication into my Angular 2 project using the following steps: Begin by registering an Instagram Client and adding a sandbox user (as a prerequisite) Within signup.html, include the following code snippet: <button t ...

javascriptangularinstagram-api

Update the JSON object with new data using JavaScript

After not receiving a proper response on my previous JSON replacement question, I am posting this follow-up query with a more detailed example. var beforeReplacement=[ { "Name": "app1", "id": "1", "groups": [ { ...

javascriptangularjsjsonreplace