SVG가 CSS 배경 이미지로 렌더링되지 않습니다.

background-image과 같은 SVG 이미지를 사용하여 닫기 버튼을 구현하려고합니다.SVG가 CSS 배경 이미지로 렌더링되지 않습니다.

.close-button { 
    width: 16px; 
    height: 16px; 
    background-image: url(data:image/svg+xml;base64,[The data for the image]); 
    background-size: 16px 16px; 
    background-position: center center; 
} 

<span class="close-button"></span>

당신은 그것을 here을 테스트 할 수 있습니다 : 아래는 내가 사용하고 코드입니다.

16 by 16 span이되지만 이미지가 렌더링되지 않습니다. 왜 이런 일이 일어나는 걸까요? 또한 이미지는 원래 검은 색으로 채워져 있습니다. 그 채우기를 흰색으로 바꾸고 싶습니다. 이것을 달성 할 수있는 방법이 있습니까?

그래서, 내 질문은 :

왜 이미지가 배경으로 렌더링하지 않는 이유는 무엇입니까?
:hover에서 SVG 채우기를 변경하는 방법은 무엇입니까? (내 구성 주어진 - 위의 링크에서 사용할 수를) 당신은 설정해야

출처

2014-09-20 Victor

svg는 어떻게 생겼습니까? – philipp

http://www.fileformat.info/info/unicode/char/274c/cross_mark.svg – Victor

중 하나 width 및 height, 또는 <svg>에 viewBox 속성. 그래픽을 맞추기 위해 그래픽을 조정하지 않기 때문에 viewBox을 사용하는 것이 좋습니다. 물론 모든 설정은 자유 롭지 만 쉽게 혼동을 유발할 수 있습니다.

각 요소에 맞는 SVG를 얻으려면 width 및 height을 사용하지 말고 viewBox을 사용하십시오. Here은 viewBox에 대한 좋은 설명입니다. 나는 당신이 당신의 SVG를 생성하는 방법을 알고하지 않습니다하지만 난 잉크 스케이프를 사용하여 이러한 문제를 해결하기 위해

<svg viewBox="16 104 170 170" >

다음 SVG를 들어

당신은 가능한 뷰 박스가 대략 그런 식으로 될 수있다 기록했다. 파일> 문서 속성> 콘텐츠로 문서 크기를 조정하고 저장하기 만하면됩니다.

원하는 경우 텍스트 편집기에서 svg를 열고 그와 같은 viewBox="0 0 <value of width> <value of height>"을 만들고 너비 및 높이 특성을 제거하십시오.

행운을 빌어 요!

출처

2014-09-20 09:37:12 philipp

여기에서 SVG를 다운로드했습니다 : http://www.fileformat.info/info/unicode/char/274c/index .htm, 그래서 나는 그것을 이미 생성했다. – Victor

스팬의 크기를 300 300으로 늘리고 배경 크기를 동일한 값으로 설정하면 십자가가 표시됩니다. 당신이 그것을 볼 수없는 이유는 그래픽 컨텐츠가없는 그래픽 영역을 표시하고 있기 때문입니다. 브라우저에서 svg를 열고 공백 인 0 0 16 16 영역을 봅니다. svg를 수정할 수 없다면 작동하지 않을 것입니다. – philipp

base64를 사용하여 수정 된 svg를 인코딩하는 데 문제가있는 경우 http://www.base64decode.org/ – philipp

SVG가 CSS 배경 이미지로 렌더링되지 않습니다.

답변

관련 문제