Wie kann ich mit SVG eine teilweise gefüllte Sternform erstellen?

Erstellen und teilweises Füllen einer Sternform mit SVG

Um einen Strich auf der Außenseite des Sterns zu erstellen, sollten Sie den Strich optimieren- linecap-Eigenschaft. Hier ist eine aktualisierte Version Ihres Codes:

<br><svg height="210" width="500"><br> <polygon point="100,10 40,198 190 ,78 10,78 160,198" Stroke-linecap="round"></svg><br>

Jetzt füllen wir die Sternform teilweise aus. Um diesen Effekt zu erzielen, können Sie CSS-Filter verwenden. Ein Filter namens „fillpartial“ kann wie folgt definiert werden:

<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>

Dann können Sie diesen Filter wie folgt auf Ihre Sternform anwenden :

<br><polygon filter="url(#fillpartial)" Punkte="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">

Dies führt zu einer Sternform, die bis zur Hälfte gefüllt ist, wodurch ein halbgefüllter Effekt entsteht. Sie können die Stop-Color- und Stop-Opacity-Werte des ändern. Element, um die Farbe und Transparenz des gefüllten Bereichs zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit SVG eine teilweise gefüllte Sternform erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!