大綱和部分填充的SVG形狀

我這裏有一個的jsfiddle - http://jsfiddle.net/apbuc773/大綱和部分填充的SVG形狀

我想創建一個使用SVG的明星。

我想衝擊明星的外面。在我的例子中，筆劃在每一條剖切內部形狀的線上。

也可以半填充星形。

我想用這個作爲星級評分，但我需要一半或四分之一的填充。

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

來源

2015-03-31 ttmt

而不是定義爲在明星的每個點的多邊形五個頂點，你真的應該定義一個用於實際形狀的每個頂點。在這種情況下，有十個。定義這些，並且形狀將被很好地定義，並且筆畫將僅適用於外部。 – liamness 2015-03-31 12:04:20

好吧，我已經創建了明星和斯托克，但我可以半填充形狀 - http://jsfiddle.net/apbuc773/5/ – ttmt 2015-03-31 12:06:06

我可以建議的所有可能[梯度]（https：//開發人員。 mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients）可以做你想做的事情嗎？ – liamness 2015-03-31 12:10:15

也可以用過濾器做到這一點。這是一個動畫填充：

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

來源

2015-04-01 04:35:58

這裏有一個例子：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">

如果你不想改變你的多邊形點，只需將此多邊形兩次：一個時間中風，一次沒有。

來源

2015-03-31 13:48:07 Tolokoban

大綱和部分填充的SVG形狀

回答

相關問題