SVG <circle> 원 그리기

<circle> SVG 요소는 SVG의 기본 형상으로, 원을 생성하며, 원심과 반지름을 기반으로 하여 stroke와 fill 속성을 사용하여 원을 실선으로, 점선으로 그리고 원의 색상을 채울 수 있습니다.

SVG <circle> 요소는 원을 그리기 위해 사용됩니다. 이는 간단한 예제입니다:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

이는 실행 결과 이미지입니다

이 원은 점 cx, cy를 원심으로, 반지름 r로 구성되어 있습니다. cx, cy 및 r는 <circle> 요소의 속성입니다.

圆形描边

SVG 원의 선(선)을 설정할 수 있습니다. 이 페이지의 첫 번째 예제에서는 선이 #00으로 설정되었습니다.6600 deep green. 하지만, 선 색상을 설정할 뿐만 아니라 더 많은 것을 설정할 수도 있습니다. 또한 stroke를 사용할 수도 있습니다.-width style 속성은 선 너비를 설정합니다. 이는 예제입니다:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill:#00cc00"/></svg>

실행된 후 원의 모습은 다음과 같습니다:

stroke를 사용할 수도 있습니다.-dasharray 속성은 가장자리를 실선으로 그립니다. 이는 예제입니다:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill:#00cc00"/></svg>

이는 렌더링된 모습입니다:

원의 테두리(선)를 제거하고, 단지 채우기 색상으로 원을 채울 수도 있습니다. 예제 코드는 다음과 같습니다:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00"/></svg>

빈 테두리가 없는 원의 실행 후 효과는 다음과 같습니다:

Circle Fill

fill 스타일 속성은 원의 채우기 방식을 제어합니다. fill 속성을 none로 설정하면 완전히 채우지 않을 수 있습니다.
예제는 다음과 같습니다:

채우기가 없는 원의 모습은 다음과 같습니다:

fill 속성을 사용하여 채우기 색상을 설정할 수 있습니다. 이 문서의 앞에서 설명했듯이, 예제 코드는 다음과 같습니다:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

원을 그리고 색상을 채우는 모습은 다음과 같습니다:

fill을 사용할 수도 있습니다.-opacity style 속성은 채우기를 투명으로 설정합니다. 다음 예제는 두 개의 원을 그렸으며, 하나의 원이 다른 원의 위에 부분적으로 위치하고 있으며 반투명합니다.

<svg　height="80px">
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle　cx="64"　cy="40"　r="24"　style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

효과를 실행해보세요:

주의하십시오. 파란색(오른쪽) 원은 지금 내부가 반투명합니다. 선도 반투명하게 만들려면 stroke를 사용해야 합니다-opacitystyle 속성.