Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am unsure how to prepare the SVG image for this action. Simply changing the path of an element in the SVG tag does not position the changed element correctly on the main SVG image.

What do I need to know about SVG and changing SVG element paths in order to achieve the desired outcome? Copying the path from a new SVG image and pasting it onto the main SVG image as an element does not seem to work effectively.

Perhaps the easiest way to understand this concept is through the analogy of customizing a shoe. In the main SVG image, there is a shoe with separate elements for the tongue and heel. There are five different options for both the tongue and heel. When clicking on the shoe's tongue, I should be able to choose from one of the five options (same goes for the heel). Upon selecting a new tongue for the shoe, the main SVG image should update to display the chosen tongue (similarly for the heel).

I believe that altering the element's path is necessary to change the image, though I am uncertain if this method is correct.

Thank you in advance,

Best regards.

https://i.stack.imgur.com/EgM5k.png

javascripthtmlcsssvg

Answer №1

To maintain consistency in the design, I recommend using <symbol>s with either the same viewBox or at least the same ratio. By using the <use> tag, you can refer to those symbols and ensure that the x,y, width, and height attributes are always the same for a specific location.

Here is an example where the icon changes dynamically upon clicking:

const SVG_XLINK = "http://www.w3.org/1999/xlink";


demo.addEventListener("click",()=>{
  let actual = volume.getAttribute('xlink:href');
  if(actual == "#volume_up"){
    volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_off');
  }else{volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_up');}
})
svg{border:1px solid;width:90vh}
<svg id="demo" viewBox = "0 0 100 100"> 
<symbol id="volume_up" viewBox='0 0 24 24'>
  <title>volume up</title>
  <path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'></path>

</symbol>
<symbol id="volume_off" viewBox='0 0 24 24'><title>volume off</title>
    <path d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'></path>
</symbol>
  
  <use id="volume" xlink:href="#volume_off" x="35"  y="35" width="30" height="30"/>
</svg>

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

I'm trying to create a drop-down list in JS that will save selected options to a database using PHP. I'm feeling a bit lost, anyone

My goal is to upload a pdf file with specific options that determine its category. The challenge arises when creating multiple options, as the second option depends on the first choice and involves JavaScript functionality for which I am unsure how to stor ...

javascriptphp

Creating Conditional Connections in jsPlumb

Attempting to establish connections between nodes based on specific rules, such as: The "API request" endpoint is restricted from connecting to any node except "Initiate Call". The "Failed" endpoint cannot be linked to "Play Audio", and so forth. Below ...

javascriptjqueryvue.jsjsplumb

retrieve a reply from a PHP script and incorporate it into JavaScript following an AJAX request

I've been working with an ajax call and everything seems to be running smoothly thanks to this script: $(document).ready(function() { $('.sortable').sortable({ stop: function(event, ui) { $(ui.item).effect("highlight"); ...

javascriptphpjqueryajax

What is the best way to display my table?

In the index.php view, you will find my table located <table class="striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th ...

javascriptphpjqueryajaxcodeigniter

Applying CSS styles exclusively to a div element and not its before pseudo-class

So I'm working on an HTML page with a div that looks like this: <div class="get-this"> blah blah </div> I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pse ...

htmlcss

Upgrade to Jquery 2.x for improved performance and utilize the latest ajax code enhancements from previous versions

We are encountering a minor issue with Jquery while loading numerous ajax files in our system. Currently, we are using Jquery 2.x and need to be able to operate offline on IE 9+. Previously, when working with Jquery 1.x, we were able to load ajax files fro ...

javascriptjqueryajax

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

HTML - Is there a way to hide the label showing the number of files selected when using input type=file?

I am seeking a way to either eliminate the label that indicates the number of selected files, or be able to control it so that when I upload a file, the label increases and decreases when I delete an uploaded file. How can I achieve this? Below is my HTML ...

jqueryhtmlasp.net-mvcfile-upload

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

htmlcss

`How can you adjust the language preferences for users in Meteor?`

My website is internationalized using the tap-i18n plugin. I am looking to allow users to switch between languages on the site. Currently, I have a file called client/setLanguage.js where I set the language on startup: getUserLanguage = function () { ...

javascriptnode.jsmeteorinternationalization

validate the existence of the username upon submission of the form

Here is some code that I have written. .js $(document).ready(function() { $("#username").focusout(function() { $.ajax({ type:'post', url:site_url()+'/client/checkUserName', data:{&apos ...

phpjavascriptajax

All Material UI components are aligned in a single row, spanning the entire width of the page

These are the components I am currently working with: Sandbox: https://codesandbox.io/s/6ipdf?file=/demo.js:78-129 <FormControl sx={{ m: 1 }} variant="standard"> <InputLabel htmlFor="demo-customized-textbox">Age& ...

javascriptreactjsmaterial-ui

Error occurred during download or resource does not meet image format requirements

Encountering an issue when attempting to utilize the icon specified in the Manifest: http://localhost:3000/logo192.png (Download error or invalid image resource) from the console? import React from 'react'; import Logo from '../Images/logo1 ...

javascripthtmlcssreactjsbrowser

Updating state based on input from a different component

I am attempting to modify the state of the page index in index.js from the Pagination component, Here is my index.js code: import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const ini ...

javascriptreactjsnext.js

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

css

HTML Browser Notice

My panel is designed to display different elements based on the browser being used. Specifically, I want different content to appear for IE, Firefox, and all other browsers. I don't want to create unique code for every browser, but rather streamline i ...

html

What is the process for interacting with DOM Elements in Node JS?

JAVASCRIPT FILE const path = require('path'); const http = require('http'); const fs = require('fs'); const dir = '../frontend/'; const server = http.createServer((request, respond) => { console.log(reques ...

javascripthtmlnode.js

Tips for adjusting the default width of the container in Bootstrap3

Modifying the default width of a Bootstrap 3 container without causing any alignment issues can be a challenge. The default container width currently set is .container { width: 1170px; } However, I am looking to adjust it to .container { wid ...

htmlcsstwitter-bootstrap-3

Having trouble importing d3.js and typescript in IntelliJ?

Encountering errors in browsers' console when utilizing d3.select() in typescript code. Despite trying alternative methods like d3-timer.now(), the issue persists. As a newcomer to typescript, I am utilizing intelliJ Ultimate 2019.1. Through npm, I h ...

javascripttypescriptd3.jsintellij-ideaecmascript-6

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

javascriptpythonhtmlcss