CSS를 사용하여 외부에 연결된 SVG의 스타일을 지정하는 방법은 무엇입니까?

외부 CSS로 SVG 스타일을 지정하는 방법

SVG 그래픽을 외부에 저장하고 링크를 통해 액세스할 때 외부 CSS를 통해 스타일을 지정하면 문제가 발생할 수 있습니다. 도전. 이 경우 CSS 파일은 SVG의 콘텐츠를 직접 수정할 수 없습니다.

외부 CSS 제한

외부 CSS 파일 "main.css"는 SVG 콘텐츠에만 영향을 미칩니다. HTML에 인라인으로 포함된 경우 SVG의 콘텐츠입니다. 즉, 다음 코드 조각은

<a href="http://youtube.com/..." target="_blank">
  <img class="socIcon" src="images/socYouTube.svg" title="View my videos on YouTube" alt="YouTube" />
</a>

"main.css"의 CSS에 영향을 받지 않습니다.

SVG 내에 스타일 적용

외부적으로 저장된 SVG의 스타일을 지정하려면 SVG 파일 자체 내에서 CSS를 정의해야 합니다. 스타일 태그를 사용할 수 있습니다.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill: red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......."/>
  </g>
</svg>

또는 Ruby의 Nokogiri와 같은 서버 측 도구를 사용하여 활성 스타일을 기반으로 스타일 태그를 업데이트할 수 있습니다.

대체 옵션

위의 솔루션 중 어느 것도 실행 가능하지 않은 경우 인라인을 사용할 수 있습니다. SVG를 생성하거나 다양한 스타일로 별도의 PNG를 생성합니다.

위 내용은 CSS를 사용하여 외부에 연결된 SVG의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!