Setting innerHTML does not affect the content of an SVG element

I am currently working on an Angular 7 application and I need to dynamically update the text value based on a dropdown selection.

For example, if the id of the text element is 10, then I want to change the text from 'hi' to 'hello'.

The issue I am facing is that when using setProperty innerHTML to update the text value, it works perfectly fine in Chrome. However, when attempting the same action in Internet Explorer (IE), the text value does not get updated.

<text id='10'>hi</text>

svgElement: SVGElement;
pathElement: HTMLElement;

constructor(private renderer: Renderer2) { }

this.pathElement = svgElement.querySelector(`[id='10']`);
this.renderer.setProperty(this.pathElement, 'innerHTML', 'hello');
javascriptangulartypescript

Answer №1

Surprisingly, the solution turned out to be quite simple. Instead of using renderer, setProperty, or innerHTML to set the value of an SVG element, all we need is to utilize textContent. This method works seamlessly across all browsers.

pathElement: SVGTextElement;

this.pathElement = svgElement.querySelector(`[id='10']`);
this.pathElement.textContent = 'hello'

Answer №2

Utilize the DomSanitizer method

Follow this example:

import { DomSanitizer } from '@angular/platform-browser'

constructor(private renderer: Renderer2, private domSanitizer: DomSanitizer){}

this.pathElement = svgElement.querySelector(`[id='10']`);
this.renderer.setProperty(this.domSanitizer.bypassSecurityTrustHtml(this.pathElement), 'innerHTML', 'hello');

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

The change event for the select element is malfunctioning

Currently, I am deep diving into Nodejs with the second edition of the node cookbook. This book has caught my attention because it explains concepts using practical sample code, making it easier to grasp. The example code I am working on is related to Br ...

javascriptjqueryajaxnode.js

Confirm the session validity before invoking the web service function from an ajax function triggered by clicking a button

I am experiencing a complex issue. On a page, users input data and then click on a button to save all the parameters into a JSON object. After saving locally, they click another button which triggers an ajax method that calls a web service method on the sa ...

javascriptc#jqueryasp.netajax

Having trouble with Axios on Android after compiling with Phonegap?

I'm facing an issue with my Phonegap .apk file after building it on their platform. The problem lies with axios not functioning properly, although it works fine in my Desktop Phonegap App. I'm unsure of the root cause behind this, could it be rel ...

javascriptandroidvue.jsaxiosphonegap

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

When using tab control in Ajax, I encountered an issue where a blue rectangle box appeared when clicking or opening the page. How can I remove this unwanted box? ...

javascriptjquerycssasp.netajax

Click the button to reset all selected options

<form method="post" action="asdasd" class="custom" id="search"> <select name="sel1" id="sel1"> <option value="all">all</option> <option value="val1">val1</option> <option value="val2" selected="selected"> ...

javascriptjqueryselectbuttonreset

Creating collapsible tables with hook functionality in Material-UI

Having trouble resolving this issue, I am seeking assistance with my handleClick() function which is supposed to collapse and expand all table rows simultaneously. The code snippet demonstrating the issue can be found here. Can anyone explain why it is not ...

javascriptreactjsmaterial-ui

Error message on Angular 4: "404 - Unable to locate file

Currently, I am working with Angular 4 and attempting to load .csv data. For reference, I have been following this guide: . However, I am facing issues while trying to load the sample.csv file. Despite trying to place the file in src/app, src, or root dire ...

angularfilecsvhttp-status-code-404

What is the best way to remove an object element by index within AngularJS?

One of my challenges involves dealing with objects, specifically $scope.formData = {} I am trying to figure out how to remove an element from the object using the index $index: $scope.formData.university[$index]; My attempt was: $scope.formData.univer ...

javascriptangularjs

VueJS - Harnessing the power of the Document Object Model for dynamic template rendering

Essentially, I am in need of VueJS to provide warnings for unregistered components when in DOM template parsing mode. It seems that currently Vue does not pay attention to custom HTML when using DOM templates, although errors are correctly displayed with s ...

javascripttemplatesvue.jsdom

Sophisticated method for arranging three integers in javascript in descending order, followed by analyzing their relative distances

In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...

javascriptjquerysortingcompare

various locations within a hexagonal zone or figure

In my project, I am working with a simple hexagonal grid. My goal is to select a group of hexagons and fill them with random points. Here is the step-by-step process of generating these points: I start by selecting hexagons using a list of hex coordinat ...

javascriptrandomshapespointhexagonal-tiles

Transforming a high chart into an image and transmitting it to the server through an ajax request

I am looking for a way to save multiple charts as PDF files on the server using an AJAX call. Each chart is rendered in a distinct container on the same page, and I need to convert them into images before sending them to the server for export. Any assist ...

javascriptjsonimagehighcharts

Horizontal scroll box content is being truncated

I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off. Here's the snippet of code causing the issue: function feedbackDiv(feedback_id, feedback_title, feedb ...

javascripthtmlcssscrollhorizontal-scrolling

discord.js: Imported array not displaying expected values

I've been facing an issue with accessing elements from an imported array. Even though the array is successfully imported, attempting to access its elements using [0] results in undefined. Here's how I exported the array in standList.js: exports. ...

javascriptarraysimportdiscord.js

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Welcome to the community of inquisitive individuals on Stack! I'm facing an interesting challenge while developing an Express app. Despite everything running smoothly with two routes, I've hit a roadblock with one route that seems to have empty i ...

javascriptnode.jsexpressroutesrequest

Using a UUID as the default ID in a Postgres database system is a straightforward process

As I transition to postgres from mongodb due to the recent announcement, I've noticed that the IDs are simply numerical and auto-incremented. I've attempted a few solutions: Setting the default ID to a UUID with a lifecycle hook - Unfortunately, ...

javascriptpostgresqlnext.jsstrapibookshelf.js

Generate a hyperlink within a paragraph

Can anyone provide tips on how to turn a string from Json into a paragraph with a hyperlink included? <p>Dumy Dumy Dumy Dumy Dumy Dumy Dumy DumyDumyDumyDumy abc.com </p> Currently, the paragraph displays as is, but I would like to make abc.c ...

javascripthtmlangularjs

Save your AngularJS SVG file as a JPG

I am attempting to develop a custom directive that will allow me to convert an SVG file into a JPG or PNG format. I stumbled upon this website: http://bl.ocks.org/mbostock/6466603 So, I decided to try and implement something similar with the following co ...

javascriptangularjs

unanticipated installation issue with published npm package on verdaccio

I am on a mission to create and release a package containing commonly used TypeScript functions on Verdaccio, an npm registry that operates on Docker. After completing the build for my TypeScript package, this is how my project structure looks: https://i ...

typescriptnpmnode-modulesverdaccio