SVG로 부분적으로 채워진 별 모양을 어떻게 만들 수 있나요?

SVG로 별 모양 만들기 및 부분 채우기

별 외부에 획을 만들려면 획을 조정해야 합니다. linecap 속성. 코드의 업데이트된 버전은 다음과 같습니다.

<br><svg height="210" width="500"><br> <polygon points="100,10 40,198 190 ,78 10,78 160,198" 스트로크-linecap="round"></svg><br>

이제 별 모양을 부분적으로 채워 보겠습니다. CSS 필터를 사용하여 이 효과를 얻을 수 있습니다. "fillpartial"이라는 필터는 다음과 같이 정의할 수 있습니다.

<br><defs><br> <filter><pre class="brush:php;toolbar:false"><feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
  <animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" /></p>
<p></filter><br> </defs><br>

그런 다음 이 필터를 별 모양에 다음과 같이 적용할 수 있습니다.

<br><다각형 필터 ="url(#fillpartial)" 포인트="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,<br> 203.042, 152.639,<br> 176.756, 148.820,<br> 165 .000, 125.000,<br> 153.244, 148.820 ,<br> 126.958, 152.639,<br> 145.979, 171.180,<br> 141.489, 197.361,<br> 165.000, 185.000">

이렇게 하면 별 모양은 중간 지점까지 채워져 반쯤 채워진 효과를 만들어냅니다. 의 중지 색상 및 중지 불투명도 값을 수정할 수 있습니다. 채워진 영역의 색상과 투명도를 변경하는 요소입니다.

위 내용은 SVG로 부분적으로 채워진 별 모양을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!