선과 원을 같은 방식으로 이동하고 CSS로 전환에 애니메이션을 적용하고 싶습니다.
그것은 선이 아니라 원을 위해 작동합니다.
뭐가 문제 야 ?
const state = {
x: 75,
y: 75
};
const line = document.getElementsByTagName('line')[0];
const circle = document.getElementsByTagName('circle')[0];
setInterval(() => {
state.x = Math.floor(Math.random() * 150);
state.y = Math.floor(Math.random() * 150);
line.setAttribute("x2", state.x);
line.setAttribute("y2", state.y);
circle.setAttribute("transform", `translate(${state.x} ${state.y})`);
}, 2000)circle,
line {
transition: all 1s ease;
}<svg height="150" width="150" style="border: 1px solid black">
<line
x1="0"
y1="0"
x2="75"
y2="75"
stroke="red"
>
</line>
<circle
r="10"
transform="translate(75 75)"
fill="none"
stroke="blue"
>
</circle>
</svg>원과 선을 동시에 애니메이션으로 만드는 가장 쉬운 방법은 원을 마커 로 사용하는 것 입니다.
이 경우 원은 항상 선에 연결되고 함께 애니메이션됩니다.
const state = {
x: 75,
y: 75
};
const line = document.getElementsByTagName('line')[0];
const circle = document.getElementsByTagName('circle')[0];
setInterval(() => {
state.x = Math.floor(Math.random() * 150);
state.y = Math.floor(Math.random() * 150);
line.setAttribute("x2", state.x);
line.setAttribute("y2", state.y);
}, 2000)<svg height="160" width="160" style="border: 1px solid black">
<defs>
<marker id="markEnd" viewBox="0 0 22 22" refX="10" refY="10" markerUnits="userSpaceOnUse" markerWidth="22" markerHeight="22">
<circle r="10" cx="10" cy="10" fill="none" stroke="blue" />
</marker>
</defs>
<line
x1="0"
y1="0"
x2="75"
y2="75"
stroke="red"
marker-end="url(#markEnd)"
>
</line>
</svg>최신 정보
줄을 경로 및 마커로 바꾸는 옵션 @AOD
const state = {
x: 75,
y: 75
};
const line = document.getElementsByClassName('line')[0];
setInterval(() => {
state.x = Math.floor(Math.random() * 150);
state.y = Math.floor(Math.random() * 150);
line.setAttribute("d", `M 0 0 L ${state.x} ${state.y}`);
}, 2000)path {
transition: all 1s ease;
}<svg height="160" width="160" style="border: 1px solid black">
<defs>
<marker id="markEnd" viewBox="0 0 22 22" refX="10" refY="10" markerUnits="userSpaceOnUse" markerWidth="22" markerHeight="22">
<circle r="10" cx="10" cy="10" fill="none" stroke="blue" />
</marker>
</defs>
<path
class="line"
d="M 0 0 L 75 75"
stroke="red"
fill="none"
marker-end="url(#markEnd)"
/>
</svg>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다