All geek questions in one place

Designation and partial completion of the SVG form

I have jsfiddle here - http://jsfiddle.net/apbuc773/

I want to create a star using svg.

I would like to stroke the appearance of a star. In my example, a stroke is on every line that cuts the inner shape.

Half-filling the shape of a star is also possible.

I would like to use this for a star rating, but I need half and maybe a quarter fill.

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

You can alternatively do this with a filter. Here is one that enlivens the filling:

 <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>
+5
source

Here is an example: http://jsfiddle.net/apbuc773/11/

The gradient can be used as follows:

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

If you do not want to change the points of the polygon, simply apply this polygon twice: once with a stroke and once without it.

+3
source

Source: https://habr.com/ru/post/984494/

More articles:


All Articles