Firefox 의사 요소에 내 SVG 배경 이미지가 표시되지 않는 이유는 무엇입니까?

SVG 배경 이미지가 Firefox 의사 요소에 표시되지 않음

CSS에서는 배경을 사용하여 의사 요소에 대한 배경 이미지를 지정할 수 있습니다. 이미지 속성. 그러나 SVG 이미지의 경우처럼 데이터 이미지를 사용할 경우 Firefox에서는 이미지가 제대로 표시되지 않습니다.

원인:

근본 원인은 사용에 있습니다. 데이터 URL의 해시 문자(#)입니다. URL에서 해시 문자는 조각 식별자의 시작을 나타내기 위해 예약되어 있습니다.

해결책:

이 문제를 해결하려면 데이터에서 해시 문자를 인코딩하세요. URL을 #으로 변환합니다. 방법은 다음과 같습니다.

background-image: url('data:image/svg+xml;utf8,<svg version="1.1">

해시 문자를 인코딩하면 해당 문자가 요소 내의 식별자가 아닌 데이터 URL의 일부로 올바르게 해석되도록 할 수 있습니다. 이 변경으로 문제가 해결되고 SVG 이미지가 Firefox의 의사 요소에 배경으로 올바르게 표시됩니다.

위 내용은 Firefox 의사 요소에 내 SVG 배경 이미지가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!