我正在爲音樂家進行網絡互動測試,並且陷入了困境,互動。拉伸並旋轉SVG圖像的特定部分
用戶應該在五線譜上移動音符並調整它們。 SVG程序以筆記形式呈現,每個筆記都有一個獨立的父級div容器。父div被拖動到五線譜,然後可以調整大小(我正在使用jQuery用戶界面,選項「手柄」設置爲「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的唯一部分,需要伸展到右邊。撇開下方的紅色箭頭 - 注意應該(不知何故?)上下旋轉,以使第三個狀態成爲可能
是我正在尋找的最終狀態。
我做了什麼: 除了過多的谷歌搜索,沒有太多。我試圖將SVG圖像的「寬度」設置爲父div的「100%」,並添加preserveAspectRatio =「none」,但我所得到的只是難看的拉伸音符。至於旋轉,我甚至沒有一個想法,我應該從什麼開始。
我會永遠感激,如果有人指出我應該谷歌,或者我應該使用的圖書館。我感覺這個解決方案在某個地方很近,我只是因爲在該領域的經驗非常有限而錯過了它。 謝謝大家。
preserveAspectRatio什麼都不做,而不視框 –
需要3'<路...'這個工作。獨立音符x2和連接條。不要試圖伸展,看起來真的很糟糕。而是使用javascript來移動筆記並更新連接欄。 –