概述和部分填充 SVG 形状 [英] Outlining and partially filling an SVG Shape

问题描述

我这里有一个 jsfiddle - http://jsfiddle.net/apbuc773/

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

我想用 svg 创建一颗星星.

I'd like to create a star using svg.

我想抚摸星星的外面.在我的示例中，描边位于剖析内部形状的每一行上.

I'd like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape.

也可以将星形填充一半.

Also is it possible to half fill the star shape.

我想用它来评价星级，但我需要一半甚至四分之一的填充物.

I'd like to use this for a star rating but I need half and maybe quarter fills.

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

推荐答案

您也可以使用过滤器执行此操作.这是一个动画填充:

You can alternatively do this with a filter. Here is one that animates the fill:

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

这篇关于概述和部分填充 SVG 形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！