`` 태그를 사용하여 내장된 SVG의 스타일을 어떻게 지정할 수 있나요?
- Patricia Arquette원래의
- 2024-12-25 17:50:14666검색
삽입된 SVG에 스타일 적용
기술적 설명
스타일시트는 정의된 문서의 경계 내에서만 적용됩니다. 포함된 SVG는 별도의 것으로 간주됩니다. 따라서 외부에서 정의된 스타일은 문서에 영향을 미칠 수 없습니다.
해결책: 스크립트 기반 스타일 삽입
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);
이것은
대체 접근 방식
-
SVG에 스타일시트 포함: 내부에서 외부 스타일시트에 대한 링크 ?xml-stylesheet 처리 명령이나
섹션. - jQuery-SVG 플러그인 사용: jQuery-SVG 플러그인을 활용하여 내장형 SVG에 JavaScript 및 CSS 스타일을 적용합니다.
직접 CSS 타겟팅
내장된 SVG가 별도의 파일에 저장되어 있는 경우 CSS를 정의할 수 있습니다.
object[data="my-embedded-svg.svg"] {
fill: #fff;
}
이 접근 방식은 SVG 자체에 스타일을 적용하지 않지만 포함된 요소의 전체적인 모양을 조정하는 데 유용할 수 있습니다.
위 내용은 `` 태그를 사용하여 내장된 SVG의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.