Question

그래서, 나는

이 그레이 스케일은 ... 작동하지 않습니다 세피아로 변경 SVG에서 그레이 스케일 사용 그러나 코드, 세피아 효과가있는 이미지를 모두 확인하고 싶었 : a img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }

그리고 이것은이다 세피아 작동하지 않습니다 : img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id="sepia"><feColorMatrix type='matrix' values='0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0'/></filter></svg>#sepia"); }

누구나 세피아 코드의 문제를 말해 줄 수 있습니까?

그리고 세피아와 그레이 스케일 이미지를 만들고 웹 키트와 같은 불투명도로 재생할 수있는 방법이 있나요? -webkit-filter: grayscale(1) sepia (0.2);?

Answer 1

[id = "sepia"]에서 큰 따옴표를 추측하고 있습니다. 또한 세피아에 대한 귀하의 가치는 약간 벗어난 것처럼 보입니다. 다른 질문 ', 당신은 컬러 매트릭스 값 사이에 애니메이션을 <animate>를 사용할 수 있지만, SVG 애니메이션 당신 때문에, IE (심지어 IE10)에서 작동하지 않습니다에

 "0.30 0.30 0.30 0 0 
     0.25 0.25 0.25 0 0 
     0.20 0.20 0.20 0 0 
     0.00 0.00 0.00 1 0" 

이 세피아 위해 시작하기에 좋은 장소입니다 의미있는 것을 스크립트로 작성해야합니다. (업데이트 - IE 용 FakeSMIL 자바 스크립트 라이브러리를 사용해보십시오 - 대부분의 SMIL을 처리 할 수 ​​있습니다.)