ID를 사용하여 계측기 키 SVG 구조화

나는 플루트와 피콜로 운지법의 대화형 차트를 만들기 위해 몇 주 동안 프로젝트를 진행했습니다. 이 프로젝트에서 작업하면서 SVG와 카레 함수를 만드는 방법을 배울 수 있었습니다.

제가 작업해 온 문제는 제 키 레이아웃이 악기 레이아웃을 최대한 비슷하게 모방하도록 하는 것이었습니다. 특히, div 가 렌더링하는 것보다 디스플레이를 더 가깝게 표시해야 하는 플루트의 오른쪽 새끼 손가락으로 제어하는 ​​작은 "롤러"키가 있습니다.

키에 대한 내 원래 코드는 다음과 같습니다.

            <div id="key-rh-broll" class="key-item key-item-roller">
                <svg height="8" width="22">
                    <rect x="1" y="1" height="6" width="20" stroke="silver" stroke-width="2" fill="none" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </div>
            <div id="key-rh-croll" class="key-item key-item-roller">
                <svg height="8" width="22">
                    <rect x="1" y="1" height="6" width="20" stroke="silver" stroke-width="2" fill="none" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </div>

롤러 사이의 공간을 최소화하고 해당 스택의 세 번째 키에 더 가깝게 이동하기 위해 CSS로 작업하는 데 많은 시간을 보냈습니다. "동일한div에 2개의 SVG를 포함할 수 있다면 더 잘 처리할 수 있을 것입니다."라고 계속 생각했던 것을 기억합니다.

나는 마침내 두 가지 svg가 같은 div에 있을 수 있어야 한다는 것을 마침내 깨달았다면 스스로에게 이것을 충분히 여러 번 말했을 것입니다. 핵심은 각 키에 대한 id 선언을 둘러싸는 div에서 svg 자체로 이동하는 것이었습니다. 결국 HTML에서 원하는 모든 요소에 id를 추가할 수 있습니다!

조정된 코드를 통해 "롤러"svg를 동일한div로 이동할 수 있었습니다.

            <div class="key-item key-item-roller">
                <svg class="key-target" id="key-rh-broll" height="8" width="22">
                    <rect x="1" y="1" height="6" width="20" stroke="silver" stroke-width="2" fill="none" />
                    Sorry, your browser does not support inline SVG.
                </svg>
                <svg class="key-target" id="key-rh-croll" height="8" width="22">
                    <rect x="1" y="1" height="6" width="20" stroke="silver" stroke-width="2" fill="none" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </div>

각 key-target에 svg 클래스를 추가하고 대신 거기에 카레 함수를 첨부하도록 코드를 조정했습니다. 다른 기능에 대한 몇 가지 추가 조정을 통해 플루트와 피콜로 레이아웃 사이를 전환하고 각 키를 클릭하고 추가 사용을 위해 해당 키id를 캡처할 수 있었습니다.



이 문제를 해결하면 사용자가 자신의 운지법 옵션을 제출하도록 하는 기능을 구현할 수 있습니다. 이 작업을 통해 처리 대상을 잘 지정할 수 있도록 요소를 구조화하는 것이 중요하다는 점을 강조했습니다.

이 좋은 진전으로 뮤지션 동료들이 기능을 시험해보고 피드백을 제공할 수 있도록 초안을 곧 게시할 예정입니다.