데이터 사용하기 : 인코딩 된 SVG를 CSS 필터로 사용

누군가 내 테스트에서 오류를 지적 할 수는 있지만, CSS 파일에 data: uri으로 SVG 필터를 사용하여 추가 파일을 사용하지 않으려한다면 실패 할 수 있습니다. 데이터가 base64로 인코딩되지 않은 경우데이터 사용하기 : 인코딩 된 SVG를 CSS 필터로 사용

Firefox Aurora에서 테스트 한 결과, 다른 브라우저는 어느 경우에도 필터를 인식하지 못하는 것 같습니다.

테스트 파일 : http://martinezdelizarrondo.com/bugs/svgfilter.html

URL의 내용 (에서

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filter1 { 
filter:url(data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"><filter id%3D"desaturate"><feColorMatrix type%3D"saturate" values%3D"0"%2F><%2Ffilter><%2Fsvg>#desaturate); 
} 

#filter2 { 
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filter1>Filter applied "as is"</p> 
<p style="color:red" id=filter2>This one is encoded as base64</p> 
</body> 
</html>

라이브 데모)은 두 경우 모두 동일합니다

<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>

는 http://software.hixie.ch/utilities/cgi/data/data

로 인코딩 보시다시피, 첫 번째 것은 빨간색으로 유지되지만 초에 있습니다. Svg 필터가 적용되고 텍스트가 회색으로 변하는 경우.

첫 번째 경우를 잊었습니까? this bug에서

내가 인코딩에 대해 아무것도 찾을 수없는, 그래서 그것이 가능해야한다고 생각

감사

을 (확실히 간단한 텍스트 인코딩을 사용하여이 base64로 그것을 "암호화"의 더 나은 대신입니다)

출처

2012-07-28 AlfonsoML

더 많은 시행 착오를 거친 후 나는 데이터에서 이스케이프를 사용하는 것이 효과적이며 다른 브라우저가이를 지원할 때까지 기다려야한다는 것을 알게되었습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filterBase64 { 
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

#filterEscape { 
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filterBase64>This one is encoded as base64</p> 
<p style="color:red" id=filterEscape>Filter encoded with "escape()"</p> 
<p style="color:red" id=filterScript>This one is applied with javascript</p> 
<script> 
document.getElementById("filterScript").style.filter="url(data:image/svg+xml," + escape('<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>') + "#desaturate)"; 
</script> 
</body> 
</html>

출처

2012-07-28 20:36:57 AlfonsoML

나는이 오래된 물건 알지만, 크롬 비슷한 일을 지원하고 그래서 IE 다양한 필터 구문을 사용하여 수행합니다 http://www.html5rocks.com/en/tutorials/filters/understanding-css/합니다. FF는 파일 경로가 필요합니다. Chrome은 새로운 필터 속성을 지원하고 이전 버전의 IE를 지원합니다. :) 더 좋은 정보는 여기에 있습니다. http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome –

그 밖의 사람 이것이 더 이상 작동하지 않는다는 것을 알아 차 리자. 'background-image : url (data ...)'는 정상적으로 작동하지만'data :'filter : url (data ...)에 'data ...'를 넣으면 URL을로드하는 데 안전하지 않은 시도가 발생합니다. 오류. – rojobuffalo

데이터 사용하기 : 인코딩 된 SVG를 CSS 필터로 사용

답변

관련 문제