HTML 마크업에서 SVG를 직접 사용하면 버튼에 역할을 할당하거나 원하는 호버 효과를 얻을 수 없습니다.

Question

다음 두 가지 기능을 수행하는 아이콘이 포함된 컨테이너가 있습니다.

1. 버튼처럼 작동합니다(키보드/스크린 리더 등을 통해 접근 가능)
2. 호버/포커스 시 빨간색으로 변합니다

마크업에서 SVG를 직접 사용하면 호버 효과가 예상대로 작동하지만 img 태그를 사용할 때처럼 SVG에 버튼 역할을 할당할 수 없습니다.

으아악 으아악

그러나 img 标签时，我可以通过 src 属性使用 SVG，为 img 分配按钮角色，但无法在悬停状态下达到预期结果（SVG 保存在其自己的文件并在 src 태그를 사용할 때 src 속성을 ​​통해 SVG를 사용하여

에 버튼 역할을 할당할 수 있지만 호버 상태에서는 예상한 결과를 얻을 수 없습니다(SVG는 다음 위치에 저장됨). 자체 파일이며 src에 인용됨):

으아악 으아악

누구 나에게 조언을 해줄 수 있나요? 🎜

Answer 1

SVG를 문서로 생각해보세요. SVG src 코드 대신 中时，您无法编辑该框架中的 CSS。当您将其作为 img가 포함된 HTML 파일을 포함하면 src 문서에서 직접 이미지를 가져옵니다.

그러나 CSS 过滤器 a>를 사용하면 브라우저에서 바로 여러 가지 멋진 Photoshop 스타일 효과를 적용할 수 있습니다.

으아악 으아악