SVG fill에 외부 링크가 있을 때 CSS3 전환 효과가 작동하지 않는 문제 해결법

SVG 요소의 fill 속성에 외부 링크를 적용할 때 CSS3 전환(transition) 효과가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 많은 개발자들이 :visited 선택자를 활용해 이 문제를 해결하려고 시도하지만, 안타깝게도 :visited 상태만으로는 이 문제를 해결할 수 없습니다.

해결 방법: URL에 랜덤 쿼리 문자열 추가

가장 효과적인 해결책은 링크 URL에 랜덤 쿼리 파라미터를 추가하여 브라우저가 해당 페이지를 '방문하지 않은' 상태로 인식하게 만드는 것입니다. 아래와 같이 PHP의 rand() 함수를 활용하면 간단히 구현할 수 있습니다.

<a href = "http:/demo.com/?foo = <?php echo rand(0, 99998) ?>">Your link</a>

매번 다른 쿼리 값이 생성되기 때문에 브라우저의 방문 기록에 영향을 받지 않고, CSS3 전환 효과가 의도한 대로 작동하게 됩니다.

JavaScript로 쿼리 문자열 제거하기

랜덤 쿼리가 실제 요청 URL에는 불필요하다면, 클릭 시점에 JavaScript로 이를 제거할 수 있습니다. jQuery의 onclick 이벤트를 활용한 예시 코드는 다음과 같습니다.

$('body').on('click', 'a', function(p) {
    p.preventDefault();
    var url1 = $(this).prop('href');
    window.location.href = url1.split("?")[0];
});

위 코드는 페이지 내 모든 <a> 태그의 클릭 이벤트를 가로채고, URL에서 물음표(?) 이후의 쿼리 문자열을 잘라낸 뒤 순수한 주소로 이동시킵니다. 이렇게 하면 사용자에게는 깔끔한 URL이 전달되면서도, CSS 전환 효과는 정상적으로 유지됩니다.

정리

• :visited 선택자만으로는 SVG fill의 CSS3 전환 문제를 해결할 수 없습니다.
• URL에 랜덤 쿼리를 추가하면 브라우저가 항상 '방문하지 않은' 상태로 처리합니다.
• JavaScript 클릭 이벤트로 실제 이동 시에는 쿼리를 제거하여 깔끔한 URL을 유지할 수 있습니다.