CSS-анимация перехода не применяется на встроенном SVG <text>, но на <rect>она работает нормально? - PullRequest
Новая
       6

CSS-анимация перехода не применяется на встроенном SVG <text>, но на <rect>она работает нормально?

0 голосов
/ 23 ноября 2018

Если вы нажмете кнопку, она изменит положение обоих элементов, но анимация будет только у rect. 

function myFunction() {
  document.getElementById("stackerCurrentSectBorder").setAttribute("y", "0%")
  document.getElementById("stackerCurrentSectCurrShift").setAttribute("y", "10%")
}
#stackerCurrentSect * {
  transition: .5s ease;
}
<svg id="statusBoardSVG" ref="statusBoardSVG" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <g id="stackerCurrentSect" ref="stackerCurrentSect">
    <rect x="30%" y="30%" width="31%" height="45%" rx="20" ry="20" fill="black" stroke="rgb(200,50,50)" stroke-width="1px" id="stackerCurrentSectBorder" ref="stackerCurrentSectBorder" />
    <text x="50%" y="50%" fill="rgb(120,120,120)" alignment-baseline="baseline" text-anchor="middle" font-size="80%" id="stackerCurrentSectCurrShift" ref="stackerCurrentSectCurrShift">current shift</text>
  </g>
</svg>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

1 Ответ

0 голосов
/ 24 ноября 2018

Чтобы использовать переход CSS, вам нужно свойство CSS для анимации.Атрибуты <text> x и y не являются.(Главным образом, потому что они могут принимать список значений, которые позиционируют глифы индивидуально.)

Кроме того, x и y для элемента <rect> были определены только как свойства CSS в спецификации SVG 2, которая нееще не полностью реализован всеми браузерами.

Вместо этого вы можете легко использовать свойство transform.Но вы должны установить свойство стиля, а не атрибут, потому что атрибут не принимает идентификаторы единиц (пока): 

function myFunction() {
  document.getElementById("stackerCurrentSectBorder").style.transform = "translateY(-30%)"
  document.getElementById("stackerCurrentSectCurrShift").style.transform = "translateY(-40%)"
}
#stackerCurrentSect * {
  transition: .5s ease;
}
<svg id="statusBoardSVG" ref="statusBoardSVG" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <g id="stackerCurrentSect" ref="stackerCurrentSect">
    <rect x="30%" y="30%" width="31%" height="45%" rx="20" ry="20" fill="black" stroke="rgb(200,50,50)" stroke-width="1px" id="stackerCurrentSectBorder" ref="stackerCurrentSectBorder" />
    <text x="50%" y="50%" fill="rgb(120,120,120)" alignment-baseline="baseline" text-anchor="middle" font-size="80%" id="stackerCurrentSectCurrShift" ref="stackerCurrentSectCurrShift">current shift</text>
  </g>
</svg>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>
...