CSS - svg 사용에 관한 질문

Question

디자이너가 제공한 png 이미지가 svg와 호환되지 않으면 사용하라고 했고, svg와 호환되면 svg를 사용하라고 했습니다. 이 호환성 문제에 대해 다음과 같이 작성된 Zhang Xinxu의 블로그를 보았습니다.

<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>

그러나 이렇게 쓰고 마우스를 svg로 이동하고 채우기 색상을 설정하면 아무 효과가 없다는 것을 알았습니다. 이제 svg 태그를 사용하여 아래와 같이 작성합니다

이렇게 쓸 때 색상 변경도 가능한데, 이렇게 쓸 때 어떻게 호환되게 만들 수 있나요? . svg와 호환되는지, svg와 호환되지 않고 그림을 사용하는지에 관계없이 마우스를 통과할 때 색상이 변경될 수 있도록 어떻게 처리해야 합니까? 고마워요 친구들

Answer 1

일반적으로 IE에서는 비호환성이 발생합니다. IE의 호환성 문제를 해결하려면 실제로 <!--[if lt IE]>와 같은 것을 사용할 수 있습니다. 그런 다음 CSS를 사용하여 svg 또는 이미지를 제거하세요 display:none.
보다 구체적인 접근 방식은 <!--[if lt IE x]>를 사용하여 html 태그에 일부 클래스를 추가하는 것입니다. svg 호환성에 관해서는 Can I Use를 확인해야 합니다.

Answer 2

xlink:href를 사용할 때 참조된 외부 svg 파일이나 심볼에서 상위에서 상속해야 하는 속성(채우기 등)을 상속하도록 변경하면 됩니다.