Рисование элемента SVG сверху с плавными переходами

Question

У меня есть страница с различными элементами SVG, которые реагируют при их зависании. При зависании элемент увеличивается по размеру, покрывая соседние элементы. Моя проблема в том, что некоторые из соседей были сделаны позже и не будут покрыты. [Example]

Я попытался исправить проблему, используя appendChild() при наведении курсора на последний элемент, но это устраняет эффект плавного перехода, который я устанавливаю с помощью CSS.

Пример:

for (var i = 0; i < 20; i++) { 
 
    for (var n = 0; n < 5; n++) { 
 
    var new_rect = document.getElementById("0").cloneNode(true); 
 
    new_rect.setAttributeNS(null, "cx", i * 20 + 10); 
 
    new_rect.setAttributeNS(null, "cy", n * 20 + 10); 
 

 
    new_rect.setAttributeNS(null, "id", i + n); 
 
    document.getElementById("mainG").appendChild(new_rect); 
 
    } 
 
} 
 

 
function expand(evt) { 
 
    //evt.target.parentNode.appendChild(evt.target); 
 
    evt.target.setAttributeNS(null, "r", "25"); 
 
} 
 

 
function shrink(evt) { 
 
    evt.target.setAttributeNS(null, "r", "10"); 
 
}

.circle { 
 
    fill: hsl(100, 30%, 80%); 
 
    -webkit-transition: .1s ease-in-out; 
 
} 
 
.circle:hover { 
 
    fill: hsl(0, 50%, 70%); 
 
}

<svg version="1.1" baseProfile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="mainG"> 
 
    <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle> 
 
    </g> 
 
    <g id="cloneG"></g> 
 
</svg>

Как я могу получить как элемент, который можно сделать на вершине, все еще имея плавные переходы между состояниями?

Answer 1

Вы можете заставить оплавления следующим ..

var test = evt.target.offsetHeight; 

Делайте это как раз перед изменением радиуса

for (var i = 0; i < 20; i++) { 
 
    for (var n = 0; n < 5; n++) { 
 
    var new_rect = document.getElementById("0").cloneNode(true); 
 
    new_rect.setAttributeNS(null, "cx", i * 20 + 10); 
 
    new_rect.setAttributeNS(null, "cy", n * 20 + 10); 
 

 
    new_rect.setAttributeNS(null, "id", i + n); 
 
    document.getElementById("mainG").appendChild(new_rect); 
 
    } 
 
} 
 

 
function expand(evt) { 
 
    evt.target.parentNode.appendChild(evt.target); 
 
    var test = evt.target.offsetHeight; 
 
    evt.target.setAttributeNS(null, "r", "25"); 
 
} 
 

 
function shrink(evt) { 
 
    evt.target.setAttributeNS(null, "r", "10"); 
 
}

.circle { 
 
    fill: hsl(100, 30%, 80%); 
 
    -webkit-transition: 1s ease-in-out; 
 
} 
 
.circle:hover { 
 
    fill: hsl(0, 50%, 70%); 
 
}

<svg version="1.1" baseProfile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="mainG"> 
 
    <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle> 
 
    </g> 
 
    <g id="cloneG"></g> 
 
</svg>

Answer 2

таким образом, вы сохранить переход CSS:

for (var i = 0; i < 20; i++) { 
 
    for (var n = 0; n < 5; n++) { 
 
    var new_rect = document.getElementById("0").cloneNode(true); 
 
    new_rect.setAttributeNS(null, "cx", i * 20 + 10); 
 
    new_rect.setAttributeNS(null, "cy", n * 20 + 10); 
 

 
    new_rect.setAttributeNS(null, "id", i + n); 
 
    document.getElementById("mainG").appendChild(new_rect); 
 
    } 
 
} 
 

 
function expand(evt) { 
 
    evt.target.parentNode.appendChild(evt.target); 
 
    evt.target.setAttributeNS(null, "r", "25"); 
 
    evt.target.style.fill='hsl(0, 50%, 70%)'; 
 
} 
 

 
function shrink(evt) { 
 
    evt.target.setAttributeNS(null, "r", "10"); 
 
    evt.target.style.fill='hsl(100, 30%, 80%)'; 
 
}

.circle { 
 
    fill: hsl(100, 30%, 80%); 
 
    -webkit-transition: .4s ease-in-out; 
 
}

<svg version="1.1" baseProfile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="mainG"> 
 
    <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle> 
 
    </g> 
 
    <g id="cloneG"></g> 
 
</svg>

или (то же самое с помощью CSS добавляется через JS)

for (var i = 0; i < 20; i++) { 
 
     for (var n = 0; n < 5; n++) { 
 
     var new_rect = document.getElementById("0").cloneNode(true); 
 
     new_rect.setAttributeNS(null, "cx", i * 20 + 10); 
 
     new_rect.setAttributeNS(null, "cy", n * 20 + 10); 
 
     new_rect.style.fill='hsl(100, 30%, 80%)'; 
 
     new_rect.setAttributeNS(null, "id", i + n); 
 
     document.getElementById("mainG").appendChild(new_rect); 
 
      
 
     } 
 
    } 
 

 
    function expand(evt) { 
 
     evt.target.parentNode.appendChild(evt.target); 
 
     evt.target.setAttributeNS(null, "r", "25"); 
 
     evt.target.style.fill='hsl(0, 50%, 70%)'; 
 
     evt.target.style.transition= '.4s ease-in-out'; 
 
    } 
 

 
    function shrink(evt) { 
 
     evt.target.setAttributeNS(null, "r", "10"); 
 
     evt.target.style.fill='hsl(100, 30%, 80%)'; 
 
    }

<svg version="1.1" baseProfile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg"> 
 
     <g id="mainG"> 
 
     <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle> 
 
     </g> 
 
     <g id="cloneG"></g> 
 
    </svg>