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;

在更改半径之前执行此操作

＆＃13;

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");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

以这种方式保留CSS转换：

＆＃13;

    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%)';
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

或（与通过JS添加的CSS相同）

＆＃13;

    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%)';
    }

＆＃13;

<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>

＆＃13;

使用平滑过渡在顶部绘制SVG元素

2 个答案: