The SVG image created is not appearing on the screen

I'm working on a JavaScript project to display SVG elements, but I'm encountering an issue with the "image" element. For some reason, when I create the image element dynamically, it doesn't appear in the browser. However, if I manually copy the code and paste it into another document, the image shows up without any problems.

Upon inspecting the image using Firebug's inspector tool, I can see that the object is being created, but the actual image is not being displayed.

To create the object, I am using methods like appendChild(), setAttribute(), and setAttributeNS().

Here is the code that is being generated:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" >
<image width="50" height="50" xlink:href="logo.png" y="20" x="20" id="d"></image>
</svg>

I'm stumped as to what could be causing this issue. Any ideas?

javascriptsvg

Answer №1

The issue stemmed from the namespaces. This is the correct method for dynamically generating images:

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'flower.png');

For further details, please refer to MDN's 'Namespaces Crash Course'.

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

Adding array elements to a JavaScript object

I find myself in a rather unique predicament that I'm struggling to navigate. I have come across some data structured as follows. Please bear with me if I use any incorrect terminology, as I am relatively new to this. usersByName: { "tester&q ...

javascriptreactjsnext.js

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

javascriptjqueryhtmlcss

Looking to implement a search filter in a table using reactJS. Wanting to optimize the search bar to dynamically filter the data displayed in the table

I'm having trouble with my search bar that is not currently filtering the information in my table. I have set up a table and a search bar, but the search bar isn't working as expected. When I type something in the search box, nothing happens. I s ...

javascriptreactjssearchfilter

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

javascriptjquerycsshtml

Using jQuery to access the data attribute values

Within my HTML code, there is a span element: <span class="field" data-fullText="This is a span element">This is a</span> I am trying to access the data-fullText attribute. I attempted two different methods, but unfortunately, they both retur ...

javascriptjqueryhtmlcustom-data-attribute

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing ...

javascripttypescriptvue.js

I found myself puzzled by the error message "Module protobufjs not found."

I am currently utilizing the node library known as node-dota2. I have completed all the necessary steps required by node-dota2, as outlined on this site: https://github.com/Arcana/node-dota2#installation-and-setup 1. Installed it using npm 2. Created a fil ...

javascriptnode.jsangularjsnpmnpm-scripts

Conditionality in the ng-repeat directive of AngularJS

Could someone please help with setting a condition in ng-repeat inside a custom directive call? <map-marker ng-repeat='obj in objects' title= 'obj.name' latitude= 'obj.last_point().latitude' longitude= ' ...

javascriptangularjsangularjs-directive

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

Currently developing my web application using AngularJS, I have a file named script.js which contains the following code: var module = angular.module('project', ['ngRoute']); // setting up our routes module.config(function ($r ...

javascripthtmlangularjsxmlhttprequestcors

Is there a way to improve error readability in React when using webpack?

Attempting to solve the issue, I decided to make a change in my npm script. Initially, it was set to operate in production mode by default: The original script looked like this: "client": "webpack -w --config ./gen/config/webpack.config.js& ...

javascriptreactjsdebuggingnpmwebpack

How does JavaScript function syntax differ in Next.js and JSX?

I'm in the process of creating a function that allows users to select different sizes. It currently works fine with just JavaScript and HTML, but I'm encountering an error when using it in Next.js. Can someone confirm if my syntax for the JavaScr ...

javascriptreactjsnext.jsjsx

What is the best way to collapse an array within an object?

I'm looking for a way to flatten an array within an object using JavaScript, preferably ES6. I'm not sure if "flattening" is the correct term here, but I just want a solution to achieve this transformation. Currently, I have this structure: { ...

javascriptarraysjsonobjectflatten

Enhancing web development with jQuery: the power of adding and removing

I'm currently working on creating a default tab that can switch classes when another tab is clicked. This is the HTML code I have so far: <div id="rightWrap"> <div id="headStep"><span class="titleSub">Workers</span></ ...

javascriptjqueryhtml

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield

Ensuring Consistent Data in Web Forms When Editing a User's "Points" Field

In the process of creating a booking system, I am faced with an issue regarding how points are allocated to users. An admin can assign points to a user through a form, which the user then uses when booking a slot. The problem arises when the admin opens th ...

javascriptnode.jsreactjsmongodbexpress

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

javascriptangulartypescriptd3.js

Exploring Angular 2 - examining how @input is implemented within the ngOnInit lifecycle hook for testing a component

Presently, I am facing a challenge while attempting to test a child component that is designed to receive input from the host component and utilizes the ngOnInit lifecycle hook as depicted in the following code snippet. @Component({ selector: 'my ...

javascriptangulartestbed

Obtaining the correct information from an array using Ionic's Angular framework

I am currently working with an array of data that contains arrays within each item. I have been able to display the data as needed, except for the IDs. Approach Show arrays within the array Retrieve the IDs of the arrays (excluding the IDs inside the ar ...

javascriptarraysangularionic-framework

The issue with mCustomScrollbar's "scrollTo" function not functioning properly has been detected within a single-page application

Although there are many similar questions out there, I have been unable to find a solution to my particular issue. In my single page application with metro style design, I am facing an issue where the scroll position does not reset back to its original pl ...

javascriptjqueryhtmlscrollbarmcustomscrollbar

Methods for retrieving HTML tag attribute values with JavaScript Regular Expressions

Imagine I have the following HTML stored in a string: <meta http-equiv="Set-Cookie" content="COOKIE1_VALUE_HERE"> <meta http-equiv="Set-Cookie" content="COOKIE2_VALUE_HERE"> <meta http-equiv="Set-Cookie" content="COOKIE3_VALUE_HERE"> Ad ...

javascriptregexnode.js