변환 된 요소의 SVG 그림자

변환을 사용하여 요소에 그림자를 설정하고 싶습니다. 변환 된 요소의 SVG 그림자

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="1000" height="800"> 
 
     <path d="M 0 0 L 50 0 L 50 50 L 0 50 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,100,0)" style="filter: url('#zr-shadow-0');"></path> 
 
     <path d="M 0 0 L 1 0 L 1 1 L 0 1 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(50,0,0,50,100,100)" style="filter: url('#zr-shadow-1');"></path> 
 
     <defs> 
 
      <filter id="zr-shadow-0" x="-10" y="-10" width="20" height="20"> 
 
       <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="blue"></feDropShadow> 
 
      </filter> 
 
      <filter id="zr-shadow-1" x="-10" y="-10" width="20" height="20"> 
 
       <feDropShadow dx="10" dy="10" stdDeviation="250" flood-color="blue"></feDropShadow> 
 
      </filter> 
 
     </defs> 
 
    </svg>

첫번째 경로

은 스케일링되지 않으며, 그 그림자가 올바르게 렌더링된다. 그러나 두 번째 경로는 x 및 y 방향으로 50 배로 조정되며 예상대로 그림자가 표시되지 않습니다.

두 번째 경로의 그림자가 첫 번째 그림자와 같도록 필터 매개 변수를 설정해야합니까?

출처

2017-11-21 Ovilia

필터가 모양에 맞게 조정되므로 objectBoundingBox 단위가 훨씬 쉽습니다. 그렇지 않으면 두 번째 경우에 dx, dy 및 stdDeviation을 50으로 나누어야합니다.

필터의 크기를 너무 크게 조정했습니다. 20은 필터링되는 모양의 20 배입니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="1000" height="800"> 
 
     <path d="M 0 0 L 50 0 L 50 50 L 0 50 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,100,0)" style="filter: url('#zr-shadow-0');"></path> 
 
     <path d="M 0 0 L 1 0 L 1 1 L 0 1 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(50,0,0,50,100,100)" style="filter: url('#zr-shadow-1');"></path> 
 
     <defs> 
 
      <filter id="zr-shadow-0" x="0" y="0" width="140%" height="140%" primitiveUnits="objectBoundingBox"> 
 
       <feDropShadow dx=".2" dy=".2" stdDeviation=".1" flood-color="blue"></feDropShadow> 
 
      </filter> 
 
      <filter id="zr-shadow-1" x="0" y="0" width="140%" height="140%" primitiveUnits="objectBoundingBox"> 
 
       <feDropShadow dx=".2" dy=".2" stdDeviation=".1" flood-color="blue"></feDropShadow> 
 
      </filter> 
 
     </defs> 
 
    </svg>

출처

2017-11-21 03:48:16

변환 된 요소의 SVG 그림자

답변

관련 문제