Delineando e parzialmente riempire una forma SVG

Ho un jsfiddle qui - http://jsfiddle.net/apbuc773/Delineando e parzialmente riempire una forma SVG

Mi piacerebbe creare una stella usando svg.

Mi piacerebbe accarezzare l'esterno della stella. Nel mio esempio il tratto è su ogni linea che analizza la forma interna.

Inoltre è possibile riempire a metà la forma a stella.

Mi piacerebbe utilizzare questo per una valutazione a stelle, ma ho bisogno di metà e forse quarti riempie.

<svg height="210" width="500"> 
     <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/> 
    </svg>

fonte

2015-03-31 ttmt

Piuttosto che definire cinque vertici nel poligono per ogni punto della stella, si dovrebbe definire una per ogni vertice nella forma attuale. In questo caso, ce ne sono dieci. Definisci anche quelli e la forma sarà ben definita, e il tratto si applicherà solo all'esterno. – liamness

OK, ho creato la stella e la bobina ma posso riempire a metà la forma - http://jsfiddle.net/apbuc773/5/ – ttmt

Tutto quello che posso suggerire è forse un [gradiente] (sviluppatore https: //. mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) potrebbe fare quello che vuoi? – liamness

In alternativa è possibile farlo con un filtro. Qui è uno che anima il riempimento:

<svg height="210" width="500"> 
 
    <defs> 
 
    <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> 
 
     <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" /> 
 
    </filter> 
 
    </defs> 
 
    <polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 
 
203.042, 152.639, 
 
176.756, 148.820, 
 
165.000, 125.000, 
 
153.244, 148.820, 
 
126.958, 152.639, 
 
145.979, 171.180, 
 
141.489, 197.361, 
 
165.000, 185.000" style="fill:white;stroke:red;" /> 
 
</svg>

fonte

2015-04-01 04:35:58

Ecco un esempio: http://jsfiddle.net/apbuc773/11/

gradiente può essere utilizzato in questo modo:

<svg height="210" width="500"> 
    <defs> 
     <linearGradient id="half"> 
      <stop offset="0%" stop-color="red" /> 
      <stop offset="50%" stop-color="red" /> 
      <stop offset="50%" stop-color="white" /> 
      <stop offset="100%" stop-color="white" /> 
     </linearGradient>    
    </defs> 
    <g fill="url(#half)" stroke="blue" stroke-width="2">

Se non si desidera modificare i punti del poligono, basta applicare questo poligono due volte: una tempo con ictus e una volta senza.

fonte

2015-03-31 13:48:07 Tolokoban

Delineando e parzialmente riempire una forma SVG

risposta

Problemi correlati