I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/
Although I am using the astro framework, I don't believe my issue is related to that detail. I have divided the project into 4 components:
- A Slice component, which includes the 3 black background sections of the slice along with 3 other components.
- A TextInner Component, which represents the text in the inner part of the slice (the minor key).
- A TextMiddle component, which displays the text in the middle portion of a slice (the major key).
- A Staff Component, which showcases the music staff, the external part of a slice.
The problem arises when I try to dynamically display the sharps and flats on the music staff. If I use the code snippet below:
<g id={staffId}>
<use width="30" href="#staff"></use>
<use width="2" href="#sharp" class="cf-sharp-1"></use>
<use width="2" href="#sharp" class="cf-sharp-2"></use>
</g>
I encounter an issue where even though the HTML elements seem correct, the sharps are not displayed as intended. Instead, the browser inspector shows this result:
https://i.sstatic.net/91O7z.png
If I comment out the two "sharp" elements and attempt to generate them programmatically with JavaScript, the generated HTML code seems accurate, but still fails to display the sharps. Below is the code for the component:
(Component code)
Although the HTML elements being generated in the inspector look identical, the outcome in the web page appears different, showing none of the sharps or flats. I am puzzled as to why this discrepancy exists. Here is the GitHub repository link for the complete project: https://github.com/0inp/circleoffifth
Your assistance with resolving this issue would be greatly appreciated!
Edit: The SVG elements are already present in my document, hence the usage of the <use> HTML tag.