基本的SVGの試み

インストゥルメントフィンガリングチャートのサイトを構築するための私の目標の一つは、それは簡単にノートをルックアップし、キーを押す必要があります本当に明確なイラストを参照してくださいすることです.一方、インターネットの黎明期からチャートサイトのフィンガリングが行われていました.彼らはウェブ上の画像の制限に苦しんだ-、ファジィ、非動的な.
私は仕事プロジェクトのためにSVGs (scalable vector graphics)で少し突く機会を持っていました、そして、私はこれが若干の基礎に取り組むために良い機会であると決めました.私が予想した利点は、異なる装置のためのより良いスケーラビリティであり、多くの画像を格納する必要性を取り除くことでした.正直にしましょう-私の目は悪くなっています、そして、私は私のために見るのが簡単だった何かを望みました!
Flutesは本当にこの種のプロジェクトのために収容されています.私はcreating an SVG circleでW 3学校チュートリアルを調べて、私が仕立てることができた若干の円を作りました.これらのサンプル円のうちの1つは、私のcurrying events blogに含まれました.

一旦私が円を働かせて、私が望む方法でクリックできるならば、私はより多くのキーに取り組むことに決めました.次の最も明白な選択は右手のためのトリルキーでした.なぜなら、彼らはしばしば卵形として描かれているからです.私は、W3 Schools ellipse tutorialを私の出発点として使いました.それは私が感じた形になるまで私は慎重に編集し、図形を見ることができるエディタを持っているw 3の学校は、十分な代表だった感じ.私は、図のより良い位置にトリルキーを押すために、若干のトップマージンを加えました.

私は今定義された幾何学図形ですべてのキーを完了していた残っているのは特別な形の鍵でした.私は左手4キー(Gシャープまたはフラットキーの別名)から始めることに決めました.Ed Emberley本から集められた私の最高の技術を使用して、私はキーが薄い、垂直長方形に接続されている完全な、水平長方形であると決めました.
私は、SVG形状が経路として描かれることができるという私の仕事プロジェクトから思い出しました.私は非常に有用な非常に有用な方法は非常に簡単なパスがどのように働いて説明したポールライアンの媒体のブログを読んでそれは私の地図上で私の想像上の車を運転していることによって地図を読む方法を学ぶことを思い出した!私も、私が基礎の理解を持ったならば、より複雑な経路を構築する方法を理解するために、SVG Path Basicsの情報を概説しました.最終的に、私は私が貢献した仕事プロジェクトのために見つけたMozilla SVG Paths tutorialの下で追跡しました.
幅と高さについて推測をして、私の予想された形を描くことの後、私はコードを私の開発サイトに加えました.それはとても小さい!いくつかの試行錯誤を通して、私はSVG Pathオブジェクトを基本的に私がそれが欲しい場所に座って、他のキーに相関するのに十分大きいように調整することができたことがわかりました.

        <div id="key-lh-4" class="key-item">
            <p class="key-name">LH 4</p>
            <svg height="60" width="40">
            <path d="M 10 10 h 20 v 40 h -5 v -28 h -15 v -12" stroke="silver" stroke-width="3" fill="none" />
            Sorry, your browser does not support inline SVG.
            </svg>
        </div>

上記のコードでは、パスの開始は、「ペン」が落とされる状態への座標でMです.その後のhおよびvマーカーは、方向がどの方向に描画され、数値がピクセルの量であるかを示す.負のピクセルが原点に戻る正のピクセルが原点から離れて移動します.私はストローク、幅を設定し、残りの残りのキーと同じに塗りつぶします.SVHの高さと幅はSVGの基本的なブロックを他のキーと同じ大きさにした.私は今左手4キーを持っている!
SVG Path Editor
短期的には、このキーは、フルートの物理的なキーへのアナログとしてよく機能します.今後の強化は、キーが他のキーに少しより良いより良いいくつかのエッジをより良い物理的なキーを表すために曲がって作る作業に合わせて位置を調整することが含まれます.
私はSVGSを作成する方法を学ぶためにいくつかの基本的なユースケースを持ってうれしいです.他の開発者やデザイナーは、複雑なロゴやイメージを作成することができますし、画像編集アプリケーションに依存していないイメージを作成するコードのこの種の素晴らしい作業を行っている.いくつかの偉大な説明のブログや記事を見つけるだけでなく、便利なエディタはすぐに私はより専門的ないくつかのキーの最初の開発で私を助け、私は残りのキーを得ることができると信じて、この新しい知識で完了しました.