search

omnibrain / svguitar

Create beautiful SVG guitar chord charts
MIT License
688 stars 41 forks source link

wrap circle and text svg elements in wrapper with class names #55

Closed Aduffy closed 3 years ago

Aduffy commented 3 years ago

It would be nice if the circle and text were wrapped in a container that contained various class names such as 


<g class="finger finger-note-G finger-string-1 finger-fret-3" opacity=".5">
  <circle r="18" cx="80" cy="264.50000190734863" fill="var(--int-1P)" stroke-width="0" stroke="#000000"></circle>
  <text x="80" y="264.50000190734863" font-family="-apple-system, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif" font-size="18" text-anchor="middle" dominant-baseline="central" fill="#000000">1</text>
</g>

I am playing the chords as strum (click) or arpeggio (dbclick), and having access to the notes individually would let me highlight the notes as each is played.

since svgGuitar does not necessarily know the note name or intervals, perhaps i could pass my own class name(s) in as part of the fingering options.

omnibrain commented 3 years ago

I like this idea a lot, unfortunately I'm too busy at the moment to implement this. But as soon as I have some time I'll implement something.

Of course you're always welcome to create a PR if you want to implement this yourself.

omnibrain commented 3 years ago

Grouping in <g>...</g>s would be more effort but classes are now added to the elements, eg. a (circle shaped) finger has classes like this:

<circle r="15.6" cx="224" cy="166" fill="#000000" stroke-width="0" stroke="#000000" class="finger finger-string-3 finger-fret-1 finger-string-3-fret-1 finger-circle"></circle>

That should make styling the SVG with CSS quite easy.

This is available from version 1.13.0