혹시 svg아시는분 있나요..기초적인건데 잘 몰라서 질문드립니다.
본문
아래 소스는 svg 소스입니다.
이제 막 svg를 시작하는 사람이라 아무것도 모르는데요
아래 소스는 네모안에 "가나다라"가 나타났다 사라졌다 하는데
제가 원하는건 "가나다라"가 나오고 지워지고 "마바사아"가 나오는것입니다.
근데 이렇게 하면 글자가 겹쳐나오고
제 생각대로 안됩니다.
어떻게 해야 할까요?
<!DOCTYPE html>
<html>
<body>
<svg width="120" height="60">
<rect width="120" height="60" style="fill:#FFFFFF;stroke-width:1;stroke:rgb(0,0,0);" />
<text x="20" y="35" fill="red">가나다라</text>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
<text x="20" y="35" fill="red">마바사아</text>
</svg>
</body>
</html>
답변 1
<!DOCTYPE html>
<html>
<body>
<svg width="120" height="60">
<rect width="120" height="60" style="fill:#FFFFFF;stroke-width:1;stroke:rgb(0,0,0);" />
<text x="20" y="35" fill="red">가나다라
<animate attributeType="CSS" attributeName="opacity" values="1;0.5;0;0;0;0;0;0.5;1" dur="3s" repeatCount="indefinite" />
</text>
<text x="20" y="35" fill="red">마바사아
<animate attributeType="CSS" attributeName="opacity" values="0;0;0;0.5;1;0.5;0;0;0" dur="3s" repeatCount="indefinite" />
</text>
</svg>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.