CSS :before 및 :after는 의사 요소 스타일 인라인 SVG를 사용할 수 있나요?

CSS :before 및 :after를 사용하여 인라인 SVG 스타일 지정

CSS :before 및 :after 의사 요소를 사용하여 인라인 SVG 요소 스타일 지정 도전이라는 것이 입증되었습니다. SVG의 시각적 영향을 향상시킬 수 있는 잠재력에도 불구하고 이 접근 방식은 대체 요소인 SVG의 특성으로 인해 한계에 직면합니다.

:before 및 :after 의사 요소는 요소 내에서 콘텐츠를 생성하는 데 주로 사용됩니다. 익명으로 대체된 요소가 발생합니다. 그러나 SVG는 이미 대체된 요소이기 때문에 생성된 콘텐츠를 사용하여 추가 콘텐츠를 주입하기가 어렵습니다.

제공된 예제(http://jsfiddle.net/wD56Q/)에서는 :before로 스타일을 정의한 문제를 보여줍니다. SVG에 영향을 미치지 않습니다. 이미지와 마찬가지로 SVG에는 생성된 콘텐츠가 포함될 수 없기 때문입니다. 원자적 요소로 간주되며 내부 콘텐츠를 변경하는 CSS 속성의 영향을 받을 수 없습니다.

이러한 제한을 극복하려면 생성된 콘텐츠를 교체된 요소 외부에 배치하는 의사 요소인 CSS :outside와 같은 실험적인 솔루션을 탐색할 수 있습니다. 그 안에 있는 것보다. 그러나 이 접근 방식은 아직 개발 중이며 널리 지원되지 않을 수 있습니다.

결론적으로 CSS :before 및 :after를 사용하여 인라인 SVG 요소에 직접 스타일을 지정하는 것은 현재 지원되지 않습니다. SVG는 대체 요소이므로 생성된 콘텐츠를 포함할 수 없습니다. CSS :outside와 같은 다른 접근 방식은 향후 잠재적인 솔루션을 제공할 수 있지만 채택 여부는 여전히 불확실합니다.

위 내용은 CSS :before 및 :after는 의사 요소 스타일 인라인 SVG를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!