konspektu i częściowo wypełnienie kształt SVG

Mam jsfiddle tutaj - http://jsfiddle.net/apbuc773/konspektu i częściowo wypełnienie kształt SVG

chciałbym stworzyć gwiazdę z wykorzystaniem SVG.

Chciałbym pogłaskać poza gwiazdą. W moim przykładzie uderzenie znajduje się na każdej linii, która rozcina wewnętrzny kształt.

Możliwe jest również wypełnienie połowy kształtu gwiazdy.

Chciałbym użyć tego dla gwiazdki, ale potrzebuję połowy, a może ćwierć wypełnienia.

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

Źródło

2015-03-31 ttmt

Zamiast definiowania pięć wierzchołków wielokąta dla każdego punktu w gwiazdę, to naprawdę powinien określić jeden dla każdego wierzchołka w aktualnej formie. W tym przypadku jest dziesięć. Zdefiniuj je również i kształt będzie dobrze zdefiniowany, a obrys będzie stosowany tylko na zewnątrz. – liamness

OK, stworzyłem gwiazdę i stoke, ale mogę w połowie wypełnić kształt - http://jsfiddle.net/apbuc773/5/ – ttmt

Wszystko, co mogę zasugerować, to może [gradient] (https: // programista. mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) może zrobić, co chcesz? – liamness

Alternatywnie można to zrobić za pomocą filtra. Tutaj jest jeden, który animuje wypełnienie:

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

Źródło

2015-04-01 04:35:58

Oto przykład: http://jsfiddle.net/apbuc773/11/

Gradient mogą być używane tak:

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

Jeśli nie chcesz zmienić swoje punkty wielokąta, po prostu zastosować ten wielokąt dwukrotnie: jeden czas z udarem i jeden raz bez.

Źródło

2015-03-31 13:48:07 Tolokoban

konspektu i częściowo wypełnienie kształt SVG

Odpowiedz

Powiązane problemy