SVG画像の特定の部分を伸ばして回転させる

Question

私はミュージシャン向けのインタラクティブなテストを行っています。

ユーザーは、譜表上の音符を移動して調整することになっています。 SVGのpathesはノートとしてレンダリングされ、各ノートのために別々の親divコンテナがあります。親divはスタブにドラッグされ、サイズを変更することができます（これはjQuery UIを使用しています（オプション "ハンドル"を "e"に設定しているので、divは右にのみサイズ変更できます）。この時点では、SVGノートのサイズを正しく変更する方法がわかりません。なぜなら、サイズ変更が必要なのはSVG全体ではなく、ただ一つの部分だからです。私は赤い数字

1. の上に、それはノートの初期状態の画像を、追加

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="32" viewBox="0 0 24 32" class="svgnote" preserveAspectRatio="none"> 
    
       <path d="M0 23.703q0-0.922 0.672-1.797 0.313-0.344 0.766-0.711t1-0.727q0.531-0.25 1.031-0.359t0.953-0.109q0.953 0 1.688 0.531v-17.344h13.578v18.797q0 0.953-0.641 1.781-0.641 0.875-1.703 1.352t-2.047 0.477q-0.859 0-1.563-0.516t-0.703-1.375q0-0.984 0.703-1.797 0.609-0.797 1.719-1.438 0.578-0.25 1.055-0.359t0.93-0.109q0.969 0 1.703 0.531v-15.188h-12.484v16.641q0 0.953-0.641 1.781-0.641 0.875-1.695 1.352t-2.055 0.477q-0.891 0-1.594-0.516-0.672-0.516-0.672-1.375z"></path> 
    
   </svg>

   Picture example ;：

   SVGsは、次のようになり

2. 右上に赤い矢印が表示されます。これは、右側に伸びる必要があるsvgの唯一の部分です。 赤い矢印を横にずらして - ノートを（上下左右に）回転させて3番目の状態を可能にする必要があります。

3. 私が探している最後の状態です。

私が行ったこと：余分なグーグルを除いて、それほど多くはありません。 SVGイメージの「幅」を親divの「100％」に設定し、preserveAspectRatio = "none"を追加しようとしましたが、得られるのは醜いストレッチされたメモだけです。 ローテーションに関しては、私は何を始めるべきかということから一言も考えていません。
誰かが私がグーグルですべきことを指摘したら、私は永遠に感謝しています。私はこれに対する解決策がどこか近くにあることを感知しています、私は現場での私の非常に限られた経験のためにそれを見逃しています。 ありがとうございます。

Answer 1

ここでは10分間のハッキングがあります。接続バーはより多くの作業を必要としますが、要点はあなたの音楽表記には<symbol>のコレクションを使用し、接続バーにはより良いパス（例：ポリゴン？）を使用します。

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    
 
    <symbol id="note-1" viewBox="0 0 313 340"> 
 
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,-1,313,340)" id="g11029"> 
 
    <path d="M 303.13715,299.65106 C 299.74131,301.47103 297.93187,304.76561 299.04493,307.24402 C 300.23219,309.88766 304.31194,310.63374 308.15151,308.90939 C 311.99107,307.18503 314.14367,303.63999 312.95641,300.99636 C 311.76914,298.35272 307.6894,297.60664 303.84983,299.33099 C 303.60986,299.43876 303.36355,299.52973 303.13715,299.65106 z " style="opacity:0.9;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.2;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" id="path11031"/> 
 
    <path d="M 299.50465,305.98445 L 299.50465,339.57202" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path11033"/> 
 
    </g> 
 
    </symbol> 
 
    
 
    <g class="first" transform="translate(0,20)"> 
 
    <use xlink:href="#note-1" /> 
 
    </g> 
 
    <g class="second" transform="translate(30,10)"> 
 
    <use xlink:href="#note-1" /> 
 
    </g> 
 
    <path stroke-width="4" stroke="black" d="M87,20 L117,10"></path> 
 
    
 
    
 
</svg>