수색…
매개 변수
매개 변수 | 기술 |
---|---|
patternUnits | 패턴 속성의 좌표계 objectBoundingBox (기본값) 또는 userSpaceOnUse |
patternContentUnits | 패턴 내용의 좌표계 objectBoundingBox 또는 userSpaceOnUse (기본값) |
패턴 변환 | 패턴의 내용에 적용하는 변환 |
엑스 | 패턴의 x 오프셋 (디폴트는 0) |
와이 | 패턴의 y 오프셋 (디폴트는 0) |
폭 | 패턴 폭 (필수) |
신장 | 패턴의 높이 (필수) |
xlink : href | 일부 속성 또는 내용을 제공하는 다른 패턴에 대한 링크 |
preserveAspectRatio | 패턴의 종횡비가 보존되어야하는지 여부 |
비고
기본적으로 패턴은 패턴 유니트의 중간을 도형의 왼쪽 상단 모서리에 설정하여 바둑판 식으로 배열됩니다.
objectBoundingBox 단위를 사용한 예제 패턴
<svg width="400" height="400">
<defs>
<pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" fill="#0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
</svg>
patternUnits 및 patternContentUnits의 조합으로 패턴 적용 범위
SVG 패턴은 동일한 모양을 채울 때 CSS 배경 이미지와 크게 다르게 동작합니다. SVG를 처음 접하는 사람들에게는 상당한 놀라움이 따를 수 있습니다. 다음은 patternUnits 및 patternContentUnits의 가능한 모든 조합에 정의 된 패턴의 예입니다. 이러한 설정이 채우기 동작에 미치는 영향을 보여줍니다.
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
<pattern id="pattern3" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="10" y="220">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<text x="10" y="240" stroke="blue" stroke-width="1">(Units used by default)</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="10" y="520">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="410" y="220">patternContentUnits="objectBoundingBox"(radius="10%") </text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="410" y="520">patternContentUnits="objectBoundingBox"(radius="10%") </text>
</svg>
patternTransform 예제
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternTransform="skewX(45)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">Original</text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternTransform="scale(1.5)"</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternTransform="skewX(45)"</text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow