javascript - 拉伸(stretch)和旋转 SVG 图像的特定部分

Question

我正在为音乐家做一个网络交互测试，并且被困在交互性上。

用户应该在五线谱上移动音符并进行调整。 SVG 路径呈现为注释，每个注释都有一个单独的父 div 容器。父 div 被拖到五线谱上，然后可以调整大小(我为此使用 jQuery UI，选项“handles”设置为“e”，因此 div 只能调整到右边的大小)。在这一点之后，我无法弄清楚如何正确调整其中的 SVG 注释的大小，因为需要调整大小的不是整个 SVG，而只是一部分。

SVG 看起来像这样:

<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 我添加了一张图片，上面是红色的图

1. 这是一个音符的初始状态；

2. 上方的红色箭头指向一条直线，这是 svg 中唯一需要向右拉伸(stretch)的部分。 将红色箭头放在一边——音符应该(以某种方式？)上下旋转，使第三种状态成为可能

3. 是我正在寻找的最终状态。

我做了什么: 除了过多的谷歌搜索，没有太多。我试图将 SVG 图像的“宽度”设置为父 div 的“100%”，并添加 preserveAspectRatio="none"，但我得到的只是丑陋的拉伸(stretch)音符。 至于轮换，我什至没有一个想法，我应该从什么开始。
如果有人指出我应该用谷歌搜索什么，或者我应该使用一个图书馆，我将永远感激不已。我感觉这个问题的解决方案很接近某个地方，我只是想念它，因为我在该领域的经验非常有限。 谢谢你们。

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>