大纲和部分填充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.

也可以一半填充星形。

我想使用这个星级评分，但我需要一半，也许季度填充。

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>

推荐答案

这里是一个动画填充：

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