2011-11-21 4 views
3

SVG XML을 코딩하는 데있어 큰 문제가 있으며 예상대로 Illustrator에서 재현하고 있습니다. 가장 큰 문제점은 바로 feColorMatrix 효과입니다. 내가 효과를 이해하고 행렬이 픽셀을 변경하는 방법을 이해하지만 내가 가지고있는 문제는 컬러 채널 행에서 최종 출력 결과로 0.5를 지정하면 Illustrator에서 0.5를 RGB 127으로 해석하지 않는 것입니다. 즉, 50 % 색의 값 이것은 0.215가 127 RGB 십진수와 같습니다. 다음은 몇 가지 코드입니다.일러스트 레이터 SVG 효과 코딩 문제

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.2" 
    viewBox="0 0 576 432" 
    width="576" 
    height="432" 
    baseProfile="tiny" 
    id="NicoleLovesSVG"> 
    <g id="Canvas"> 
     <rect 
      width="576" 
      height="432" 
      x="0" 
      y="0" 
      transform="scale(1,1)" 
      id="Canvas-Rect1" 
      style="fill:#9d8654;fill-rule:evenodd;" /> 
    </g> 
    <defs> 
     <filter id="ShadowFilter-Text1" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" width="200%" height="200%" x="-50%" y="-50%"> 
      <feColorMatrix type="matrix" in="SourceAlpha" 
       values="0 0 0 0 .5 
        0 0 0 0 0 
        0 0 0 0 0 
        0 0 0 1 0"/> 
      <feOffset dx="24.395183950936" dy="24.395183950936" result="shadow"/> 
      <feBlend in="SourceGraphic" in2="shadow" mode="normal"/> 
     </filter> 
    </defs> 
    <g 
     id="Text1" 
     transform="translate(1.1272727272727,297.27272727273) rotate(0) scale(3.5238813920454546,2.642911044034091)" 
     style="fill:#003300;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;" 
     filter="url(#ShadowFilter-Text1)"> 
      <g 
       id="Text1-Line1" 
       transform="translate(0,0)"> 
       <path 
        transform="translate(0,0)" 
        vector-effect="non-scaling-stroke" 
        id="Text1-Line1-Glyph1" 
        d="M 0,0 M 46.4,-98.24 L 46.4,-15.68 C 46.4,-8.96 47.466666666667,-3.7333333333333 49.6,-0 L 30.4,-0 C 32.533333333333,-3.7333333333333 33.6,-8.96 33.6,-15.68 L 33.6,-98.24 L 31.36,-98.24 C 21.653333333333,-98.24 12.106666666667,-96.373333333333 2.72,-92.64 L 8.32,-106.72 L 79.68,-106.72 L 74.56,-92.64 C 68.693333333333,-96.48 59.306666666667,-98.346666666667 46.4,-98.24 z" /> 
      </g> 
    </g> 
</svg> 

위에서 볼 수 있듯이 첫 번째 필터는 모두 검은 색 인 SourceAlpha를 검색합니다. 이어서 컬러 매트릭스는 소요 행렬의 첫번째 행에을 수행

(AX 적색) + (BX 그린) + (CX 블루) + (DX 알파) + E = 최종 적색 출력

숫자 꽂기 :

(0 X 0) + (0 X 0) + (0 X 0) + (0 X 0) + 0.5 = 0.5

레드 50 %이어야한다! 또는 127 RGB !!! 나는 수학을했고 Illy에서는 0.215 = 127 = 50 % ??????

+0

무작위 추측 : 미리 곱셈 된 알파와 관련이 있습니까? – Phrogz

+0

나는 그렇게 생각하지 않는다. "SourceAlpha"를 "SourceGraphic"으로 변경하여 동일한 결과를 얻을 수 있습니다. – shrimpwagon

답변

5

필터에 사용되는 색 공간의 기본값 인 linearRGB입니다.

직접> 요소를 < 필터> 요소에 color-interpolation-filters="sRGB"를 지정하거나 < feColorMatrix에 의해 원하는 동작을 얻을 수 있습니다. color-interpolation-filters을 참조하십시오.

+0

에릭, 만약 내가 병아리 였다면 나는 네가 내 아기를 갖길 바랄거야! 정말 고마워. 그거였다. 나는 사실이 문제를 4 일 동안 일하고 있었다. 농담은 아니었다. – shrimpwagon

관련 문제