Firefox에서 내 SVG 데이터 URL 배경 이미지가 표시되지 않는 이유는 무엇입니까?

SVG 데이터 URL 배경 이미지가 Firefox에 표시되지 않음

의사에서 데이터 URL을 사용하여 SVG를 배경 이미지로 설정하는 경우 요소를 사용하면 이미지가 Firefox에 표시되지 않습니다. 이는 Firefox가 URL의 '#' 문자를 조각 식별자의 시작 부분으로 처리하기 때문입니다.

이 문제를 해결하려면 데이터 URL 콘텐츠를 URL로 인코딩해야 합니다. 여기에는 '#' 문자를 '#'으로 변환하는 작업이 포함됩니다. 아래의 수정된 CSS 코드는 URL 인코딩을 통합합니다:

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,%3Csvg version="1.1">

데이터 URL 콘텐츠를 URL 인코딩함으로써 Firefox는 해시 문자를 SVG 데이터의 일부로 올바르게 해석하여 이미지가 배경으로 표시되도록 합니다.

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