두 개의 SVG feColorMatrix 필터 효과를 하나의 행렬에 통합합니까?

Question

SVG 필터를 사용하여 복잡한 경로에 흐린 "드롭 섀도우"유형 효과를 만듭니다.

<defs> 
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 
     <feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/> 
     <feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/> 
     <feGaussianBlur in="satOut" stdDeviation="8"/> 
     <feMerge> 
      <feMergeNode/> 
      <feMergeNode in="SourceGraphic"/> 
     </feMerge> 
    </filter> 
</defs> 

나는 순전히 시행 착오를 통해 위의 feColorMatrix 값에 도착했다. (행렬 수학만으로 작업한다면 어둠에서 빛에 이르기까지 특이하게 아름다운 색조 변화가 생깁니다.) 기본적으로 저는 컬러 휠을 340도 회전시키고 있습니다. 색상은 값을 3으로 사용하여 흐리게하기 직전에 (. 스펙이에 다소 불분명로 사용하지만, 시행 착오가 type="saturate" 1 이상 값이 한 채도 빼기 아래의 이미지를 이미지와 값을 포화 것으로 나타났습니다) 여기

문제이다 : 나는 대규모 반복 해요 경로의 양과 이중 행렬 연산은 기계를 멈추게합니다. 너무 자주 충돌합니다.

위의 두 개의 feColorMatrix 필터를 하나의 더 효율적인 feColorMatrix = "matrix"필터 프리미티브로 결합하기 위해 일부 매트릭스 수학 전문가가 나를 도와 드릴까요? 나는 spec의 요지를 얻지 만, 나는 수학의 측면에서 내 머리 위로 들어간다.

Answer 1

내 경험에 의하면 ColorMatrix 작업은 매우 빠르며 흐림 효과는 매우 느리기 때문에 이러한 작업을 결합하면 매우 멀리 할 수 ​​없을 것입니다. 그러나 FWIW는 여기에 결합 된 행렬입니다. (이 할 어렵지 않다 - 온라인 행렬 승수 많이 :)가

2.5537 -0.61224 0.52246 0 0 
-0.4163 1.30776 -0.10754 0 0 
0.3037 -0.88224 2.3546 0 0 
0 0 0 1 0 
0 0 0 0 1 

업데이트 : 단계별로

확인 단계. the svg filters spec에 따르면 포화의 매트릭스 것과 동일합니다 :

| R' |  |0.213+0.787s 0.715-0.715s 0.072-0.072s 0 0 | | R | 
| G' |  |0.213-0.213s 0.715+0.285s 0.072-0.072s 0 0 | | G | 
| B' | = |0.213-0.213s 0.715-0.715s 0.072+0.928s 0 0 | * | B | 
| A' |  |   0   0    0 1 0 | | A | 
| 1 |  |   0   0    0 0 1 | | 1 | 

그래서 당신이해야 할 모든 당신을 위해 약간의 엑셀 테이블을 곱하는이 구축이다. 그런 다음

당신은 색조 회전에 대한 사양을 보면 당신은 huerotate에 대한 매트릭스 상당입니다 찾기 : 등의 용어 A00, A01은 다음과 같이 계산된다

| R' |  | a00 a01 a02 0 0 | | R | 
| G' |  | a10 a11 a12 0 0 | | G | 
| B' | = | a20 a21 a22 0 0 | * | B | 
| A' |  | 0 0 0 1 0 | | A | 
| 1 |  | 0 0 0 0 1 | | 1 | 

은 다음과 같습니다

| a00 a01 a02 | [+0.213 +0.715 +0.072] 
| a10 a11 a12 | = [+0.213 +0.715 +0.072] + 
| a20 a21 a22 | [+0.213 +0.715 +0.072] 
         [+0.787 -0.715 -0.072] 
cos(hueRotate value) * [-0.213 +0.285 -0.072] + 
         [-0.213 -0.715 +0.928] 
         [-0.213 -0.715+0.928] 
sin(hueRotate value) * [+0.143 +0.140-0.283] 
         [-0.787 +0.715+0.072] 

을

라디안은 Excel 삼각 수식의 예상 입력이므로 라디안 변환 (340 도는 약 5.9 라디안 또는 2 * pi 미만)을 한 다음 결과 행렬을 Excel로 작성합니다. 여러분은 행렬을 곱할 수는 있지만 솔직히 말해서 선형 대수학 클래스를 재현하려는 큰 열망은 없습니다. 그래서 당신은 google "행렬 곱하기 온라인"과 결과의 1 페이지에 매트릭스 곱하기 도구 중 하나에 두 행렬 팝. 그리고 너 거기 간다. 통합 매트릭스.

간편한 :-)