Я делаю веб-интерактивный тест для музыкантов, и вы застряли, ну, интерактивность.Протяните и поверните определенную часть изображения SVG
Пользователи должны перемещать заметки на ноге и настраивать их. SVG-штрихи отображаются в виде заметок с отдельным родительским контейнером div для каждой заметки. Родительский div перетаскивается в stave, а затем может быть изменен (я использую jQuery UI для этого, с параметром «handle», установленным в «e», поэтому div можно изменить только вправо). После этого момента я не могу понять, как правильно изменить размер заметки SVG внутри, потому что то, что нужно изменить, - это не весь SVG, а только одна часть.
SVGs выглядеть следующим образом:
<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, которая должна растягиваться вправо. нижние красные стрелки в сторону - примечание должно (как-то?) Поворачиваться вверх и вниз, чтобы сделать 3-е состояние возможным
- это то, что окончательное состояние примечания я ищу.
То, что я сделал: за исключением чрезмерного Googling, не так много. Я попытался установить «ширину» изображения SVG на «100%» родительского div и добавить preserveAspectRatio = «none», но все, что я получил, - уродливое растянутое примечание. Что касается вращения, у меня нет ни единой идеи, с чего мне начать.
Я был бы бесконечно благодарен, если бы кто-то указывал, что мне делать, или, может быть, библиотеку, которую я должен использовать. Я чувствую, что решение этого близко где-то, я просто пропустил его из-за моего очень ограниченного опыта в этой области. Спасибо всем.
preserveAspectRatio ничего не делает без Viewbox –
Вам нужно 3 '<путь ...' для этой работы. Автономная записка x2 и соединительная панель. Не пытайтесь растягиваться, выглядит очень плохо. Вместо этого используйте javascript, чтобы переместить заметку и обновить соединительную панель. –