Очерчивание и частичное заполнение формы SVG

Question

Очерчивание и частичное заполнение формы SVG

У меня здесь есть jsfiddle - http://jsfiddle.net/apbuc773/

Я хотел бы создать звезду, используя svg.

Я хотел бы погладить внешнюю сторону звезды. В моем примере штриховка находится на каждой линии, которая рассекает внутреннюю форму.

Также можно наполовину заполнить форму звезды.

Я хотел бы использовать это для оценки звезд, но мне нужна половина и, возможно, четверть заполнения.

    <svg height="210" width="500">

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

    </svg>

670 2

css svg css-shapes

2 ответов:

Comments

Ничего не найдено.

Michael Mullany · Accepted Answer · 2015-04-01 07:35:58

Вы можете также сделать это с помощью фильтра. Вот один, который оживляет заливку:

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

Tolokoban · Accepted Answer · 2015-03-31 16:48:07

Вот пример: http://jsfiddle.net/apbuc773/11/

Градиент можно использовать следующим образом:
<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">
Если вы не хотите менять точки полигона, просто примените этот полигон дважды:один раз с штрихом и один раз без.