拖动时更改 svg 的背景

问题描述

enter image description here

我正在使用 sortable.js 使 svgs 可拖动。如何在拖动时删除图像中的白色背景,并使背景清晰?

未拖动时 svg 具有清晰的背景。

添加了如下内容

<draggable 
        class="compare-Box"
        v-model=""
        ghost-class="ghost"
        @start="drag = true"
        @end="drag = false" >  
            <div class="drag-Box" >
                 <div>
    <svg version="1.1" id="avatar167cm_and_above_MALE" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 141 419.6" xml:space="preserve">
    <path d="M139.4,141.4c-0.8-1.8-0.8-9.6-1.6-13.6s-3.8-16.2-4.9-20.6s-1.1-9.2-2-14.6s-4.1-13.8-6.4-15.9s-12.9-6.8-17.1-8.9
        s-13.1-5.2-13.9-5.9s-3.4-4.6-4.1-5.6s-1.6-3.1-2-4s-0.6-3-0.6-3s1.6-2.8,2.1-4.1s1.8-7.3,1.8-7.3c1.2-0.1,1.4-1.2,1.7-3
        s0.9-3.5,0.9-3.5c1-1.5,1.6-3.9,1.3-4.6s-1.9-0.1-1.9-0.1s0.3-1.4,0.6-4.3s0.2-8.4-1.9-12.8S84.5,2.8,80,0.9S69,0.1,64,2.8
        s-7.7,8.4-8.2,12s-0.3,11.1-0.3,11.1s-1.4-0.3-1.6,0.4s0.1,3.1,0.9,5.2s1.1,4.2,1.1,5.9s1.6,1.4,1.6,1.4s0,1.8,0.6,4.2
        s2.1,5.2,2.1,5.2s-0.2,3.9-0.6,4.4s-1.4,2.9-2.1,4.1s-1.2,2.9-3,4.3s-7.2,4.4-10.4,5.8s-16.9,6.4-18.5,7.4s-2.9,2.1-3.9,5.5
        s-7.1,19.9-8.6,28.5S6.1,136,5.1,137.9s-0.6,5.6-0.9,7.9s-3,13.4-3.2,15.6s-1,13-1,16.6s1.3,12.1,14.6c-0.3,2.6,11.4,12.8
        s0.6,2.1s-0.2,6.9,8.9s4.1,10.9,4.8,11.9s4.4,4.1,5.6,4.5s1.6,3.4,1.4s2.3,2.8-0.7s-1-3.1-1-3.1s0.6-0.8-0.2-1.8
        s-1.6-1.2-2.2-1.7s-0.6-1-0.6-2.2s-0.5-2-0.8-3s0.2-4.2,0.4-5.1s1.7-1.6,2.1-1.9s1.1,2.6c0,1.7,0.5,5.2s1,3.7,4
        s2.1-0.6,2.1-1.8s-0.2-3.1-0.1-4.9s-0.6-3.7-0.9-5.4s-0.1-3.4-0.6-4.7s-1.8-5-1.8-5s0.1-1.2-0.1-2.2s-1.6-11.2-2-12.6
        s0.7-2.2,0.7-3.2s1.4-7.1,2.8-10.1s-0.2-3.2-0.5-4.1s1.2-3.6,2-6.6s1.2-7.8,1.1-9.6s2.3-6.4,2.3-6.4s1.2-0.9,2.2-2.6
        s2.2-5.9,2.2-7.9s-0.3-6.3,0-8.9s2.2-3.6,2.2-3.6c0.1,2.3,2,4.3,8.5c-0.3,4.2-0.5,12.8-1.8,18.5s-1.5,11.5-1.8,14.7
        s1.7,5.8,5.8s-0.5,6.5-0.8,8s-2.3,17.2-2.8,29.5c-0.5,12.3,1.5,42.5,2.7,51.2s1.8,25.2,28.3c-0.3,3.2-1.2,10.2-1.3,18.3
        c-0.2,8.2,32.7,37.9s-1.3,17.7-1.6,21.4s1.6,8.4,9.6s-0.6,6.4-2.4,9.2s-7.6,10.1-10.4,14s-2.3,6.3-1.9,8.4
        s-0.2,3.9,4.5s11.6,0.7,15-1.5s5.1-4,4.8-7.1s1.7-5.8,1.7-5.8l2.4,0.2c0,1.1-0.3,2.2-1.3s3.8-3.1,3.7-4.4s-0.4-4.1-0.2-6.5
        s-0.6-3.8,0.4-6.2s2.1-8.8,3.5-16.3s1.3-23.1,1.5-28.9s-0.6-16,0.2-18.4s-0.9-5.2-0.1-7.2s0.1-5.4,0.3-8.7s2.8-9.5,4.2-16.6
        s2.8-21.3,4.6-27.9s5.6-22.8,5.6-22.8s3.4,9.4,15.2s4.8,17.8,5.3,22.8s1.4,12s0.6,4.5s1.2,6.7
        s1.2,2.9,1,5.1s1.2,7.5,8.9s0.9,4.4,5.9s-0.5,4.4s0.3,10.2s0,13.9,0.4,19.8s2.4,20.5,23s1.2,6.5,8.1
        s0.9,0.8,5.4s-0.9,6-1,6.9s1.5,5.7s2.8,1.1s0,1.9,7.5s6.9,8.9,11.8,10.4s11.1-0.6,11.7-2s1.1-5.3,0.1-9.9
        s-4.3-7.5-5.9-10.7s-4.6-9.8-4.6-9.8s0.4-5.2,1.1-11.7s0-14.6-0.6-18.3s-0.4-12.6,0.4-17.6s1.4-15.2,0.8-17.8s-0.1-4.8,0.7-7.8
        s-0.6-4.7-1.5-5.9s-0.7-3.8-0.3-6.1s-0.8-3.6-1.1-5.1s0-6.3,0.6-14.6s0.3-20.1,0.2-30.7s-2.2-36.8-2.8-41.7s-1.9-5.1-2-12.2
        s-2.6-8.7-2.6-11s0.4-6.4,0.4-6.4s2.4-1.3,3-2.9s-0.3-4.3-0.9-8.3s-1.2-13.7-0.2-16.8s1.6-9,1.6-13.4s-0.1-11.5-0.1-11.5
        s2.6,6.4s-0.7,3.8-0.6,7.4s1.2,9s0.4,4.5s3.5,12.4,16.8s-0.4,8.2-0.8,11.5s1.7,4.6,6.3
        s0.5,6.1s-0.8,8.1-0.9,8.8s0.5,0.9c-0.2,1.6-1.2,2.8-1.2,6.1s0.5,5,0.3,7.1s-0.5,6.9-0.5,6.9s-1.3,0.9-1.1,1.4
        s3.2,3.2,1.6s-1.5,1.6-1.4,2.6s2.1,0.1s3.3-1.4,3.3-1.4s2.5,3.3-0.4s2.2-2.4,3.6-5.4s2.7-4.1,2.9-5.5
        s-0.6-3.1-1.2-5.8s-0.2-4.6-0.2-4.6c0.4-0.3,0.6-2.2,0.4-4.2s0.7-11.9,1.6-15.3s-0.8-3.7-0.6-6s1-17.2,1-21.1s-1.2-4.1-0.6-5.7
        s0.6-3.3,0.2-5s0.6-3.1,1-4.9S140.2,143.2,139.4,141.4z M130,220.7c-0.5,1-0.7,3.4-0.9,3.6s-0.8,0-0.8,0c-0.5-0.7-1.9-2.1-1.9-2.1
        c-0.1-4.7,0.9-6.6,0.9-6.6s1.1,0.1s1.2-0.4,0.6S130.5,219.7,130,220.7z"/>
     </svg>

       </div>
   </div>

</draggable>

我在 vue 中使用了 sortable.js 包装器,https://github.com/SortableJS/Vue.Draggable

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)