Is it possible to use the same SVG element twice on a web page without having to load it again?
I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object.
Both instances of the SVG need to have identical manipulations, so I want to avoid loading it separately for each one. Is there a way to achieve this?
Thank you, James
svg {
color: green;
width: 20px;
height: 20px;
}<!-- Creating SVG elements -->
<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 18 15" id="sample">
<path d="M17.9 1.85L7.675 12.318 6 14.03l-1.676-1.713L.1 8.002c-.15-.162-.146-.43.01-.597l1.07-1.15c.155-.168.403-.172.554-.01L6 10.605 16.266.094c.15-.163.4-.16.555.008l1.07 1.152c.156.167.16.435.01.596z" fill="currentColor" fill-rule="evenodd"></path>
</symbol>
</svg>
</div>
<!-- Utilizing the defined SVG -->
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...
I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...
I'm struggling with an if-else block in my code that is not getting executed as expected. Despite rearranging the code to ensure the if-else condition is met before calling http.get(), I am still facing issues. This problem arises while working with A ...
Is there an SDK available from Microsoft that can help me create a web product with similar rich ajax features as Microsoft Dynamics CRM 2011? I have considered using Microsoft SharePoint Foundation 2010, but I am concerned that it is designed for small o ...
Looking for a solution to rearrange the layout of a html table with 2 cells in a row? Want to make the second cell appear below the first one instead of next to it using only CSS? It may require a bit of a "dirty hack", but the desired outcome is still n ...
I created a Node project with a single view page for users to access information. When I use an HTML form to send data, the content is empty. I have verified multiple times using Postman that the information is being saved successfully when sent with the P ...
Unique ImageI am currently working on an Angular 8 project with Angular Material. I have successfully designed a fully functional login page. However, I am encountering a problem specifically on iOS devices such as iPhones and iPads, whether it is Safari o ...
Currently, I am working on creating a registration form which will direct users to a "Thank you" page once completed. However, I want to include a button on this confirmation page that will take users back to the previous page they were on before registeri ...
https://i.sstatic.net/UXF3l.png Currently, I am working on a simple unordered list project where I am utilizing Material UI. However, there seems to be an issue that I would like some help with. (user agent) html.css The CSS includes the property padd ...
After cloning a GitHub repository, I ran npm i in both the root directory and client directories. I then created a development configuration file. However, when attempting to run npm run dev, nodemon consistently crashes with a warning about compiled cod ...
I'm facing an issue with the AJAX form as it keeps throwing an error. I really need it to function properly when a button is clicked, refreshing all data in the process. <form name="form" id="form" class="form"> ...
If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...
Our website features a left-side vertical navigation menu. In order to measure scroll depth, we incorporated Tag Manager code. However, the Tag Manager code triggers on every page load due to us fixing the body scroll and implementing a custom scroll for t ...
I am looking to exclusively show "6 AM" on my X AXIS, rather than displaying 2019-09-05 06:00:00 Please refer to my code sample at https://jsfiddle.net/uwtz3p4h/ Is it feasible to only display the time? I have searched through their documentation but co ...
'I designed a custom post plugin in Wordpress that successfully displays the title and main content, but I am facing issues with displaying other fields such as company details. Despite mentioning a featured thumbnail option in my plugin, I am not ab ...
Within my React project, I am in need of a functionality that calculates the number of days remaining between two specific dates. Essentially, I want to determine how many days are left from today until the expiration date, and then calculate the percentag ...
This is the completion of my task. $('#fine-uploader-house').fineUploader({ ... }).on('complete', function(event, id, name, jsonData) { if(!checkEmpty(jsonData.cancelAll) && jsonData.cancelAll){ //$(this).cancelAll(); ...
As a beginner, I've developed a script that scans through a large table and extracts rows containing the value '1'. The table consists of approximately 2000 rows, so it's taking quite some time to process all of them. Is there a more e ...
Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...
I'm in the process of creating a div container that will contain both an image and a checkbox input element. The checkbox input has a click handler that passes a value to a function, as well as a :value binding which sends the value to an array named ...