SVG 채우기 및 변환

transform 다음에 fill이 적용된다는 것을 알고 있지만 그 이유는 알 수 없습니다. 스펙을 살펴본 결과 왜 이것이 가능한지에 대한 정보를 찾을 수 없습니다.SVG 채우기 및 변환

fill을 요소 그룹에 적용하는 방법이 있는지 알고 싶습니다. 일부는 transform: rotate을 일관된 방식으로 사용합니다. 보시다시피 예상대로 그라데이션이 위에서 아래로 실행되는 비 회전 요소에,

<svg width='38' height='18' viewBox='0 0 38 18' xmlns='http://www.w3.org/2000/svg'> 
    <defs> 
     <linearGradient id='gradientFill' x2='0' y2='100%' gradientUnits='userSpaceOnUse'> 
      <stop stop-color='hsl(0, 0%, 0%)' /> 
      <stop offset='100%' stop-color='hsl(0, 0%, 100%)' /> 
     </linearGradient> 
     <path id='shape' d='M0,0m9,0c-3.92,0,-7.24,2.51,-8.48,6h3.29c0.83,-1.92,2.8,-3.56,5.19,-3c2.52,0.59,3,3.55,3,6c0,3.6,-0.6,6,-3,6s-3,-2.4,-3,-6h-6c0,4.97,4.03,9,9,9c4.97,0,9,-4.03,9,-9s-4.03,-9,-9,-9z'/> 
     <g id='test'> 
      <use xlink:href='#shape'></use> 
      <use transform='translate(20,0) rotate(180,9,9)' xlink:href='#shape'></use> 
     </g> 
    </defs> 
    <use class='logo' xlink:href='#test' fill="url(#gradientFill)"></use> 
</svg>

: 문제가 아래 예제 코드를 참조 설명합니다. 그러나 회전 된 요소에서는 그래디언트가 아래에서 위로 실행되도록 회전됩니다. fill이 개별 객체가 아닌 그룹에 적용되므로 이는 일관성이없는 것처럼 보입니다.

궁극적 인 욕망은 두 그라디언트의 위쪽에서 아래쪽으로 선형 그래디언트 흐름을 유지하는 것이지만 가능한 경우 use 및 transform 방법을 사용하고 싶습니다.

누군가가 스펙과 관련하여 올바른 방향으로 나를 가리킬 수 있습니까? 또한 내 목표를 달성하기위한 해결책을 제시 할 수 있습니까?

출처

2013-06-28 joeyhoer

모양을 클립 경로로 정의한 다음 원하는 그라디언트로 채워진 사각형에 적용해야합니다. 좀 더 복잡하지만 필터로 처리 할 수도 있습니다.

출처

2013-06-29 03:21:46

"채우기"와 같은 특성은 개체에서 작동하는 명령이 아니며 렌더링 할 때 개체가 사용하고 개체의 자식에 상속되는 속성입니다. CSS 규칙과 동일합니다.

원하는 효과를 얻으려면 Michael의 솔루션을 사용하거나 180도 회전과 일치하도록 x, y 및 x2, y2가 반전 된 두 번째 그라디언트를 만듭니다. 당신이 gradientUnits에 대해 이야기 할 때 먼저 SVG specification for gradients에 명시되어 변환을 적용

출처

2013-07-02 14:17:08

...

gradientUnits = "UserSpaceOnUse이면 ','X1 ','Y1 ','X2 '와'Y2 '는 표현하면 그라디언트 요소가 참조 될 때 현재 사용자 좌표계 을 취한 좌표 시스템의 값 (즉, '채우기'또는 '획'을 통해 그라데이션 요소를 참조하는 요소의 사용자 좌표계) 속성)로 지정하고 'gradientTransform'속성으로 지정된 변환을 적용합니다.

요소에 변환을 적용하면 요소의 좌표 시스템이 변경되므로 그래디언트에도 영향을줍니다.

출처

2013-07-02 15:12:19

SVG 채우기 및 변환

답변

관련 문제