Question

我正在为音乐家进行网络互动测试，并且很好地保持了互动性。

用户应该在五线谱上移动音符并进行调整。 SVG pathes呈现为注释，每个注释都有一个单独的父div容器。父div被拖到stave上，然后可以调整大小（我正在使用jQuery UI，选项“handle”设置为“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 我添加了一张图片，上面是红色的图片

这是一个音符的初始状态;
上面的红色箭头指向一条线，这是svg中唯一需要向右伸展的部分。将红色箭头放在一边 - 音符应该（不知何故？）上下旋转，以使第三种状态成为可能
是我正在寻找的最后状态。

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

拉伸和旋转SVG图像的特定部分

0 个答案: