SVG長方形とパスグラデーション

Question

私は管球グロー効果を与えるために、以下のようradialGradientを使用します。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" 
    viewBox="0 0 100 100"> 

    <radialGradient id="radial" cx="50" cy="50" r="50" 
     gradientUnits="userSpaceOnUse"> 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
     <stop offset="1" style="stop-color:#004444"/> 
    </radialGradient> 

    <circle cx="50" cy="50" r="50" 
      fill="url(#radial)"/> 
</svg> 

しかし、私は長方形とパスグラデーションまたはのための任意のカスタムシェイプのグラデーションのために同じ方法をしますかrectやstarのような異なる形？
MS PowerPointでこのオプションを使用できます。これは、矩形グラデーションおよびパスグラデーションと呼ばれます。
上記の効果のように、各稜線について中央と最初の停止点0.8でシュードが開始し、1で2番目の停止点があります。

これらのグラデーションはIllustratorで利用できますか？

Answer 1

あなたが複数のサブ形状に形状を分割することにより、それ偽物できます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100 100"> 
 

 
    <linearGradient id="horiz" x1="0.5" spreadMethod="reflect"> 
 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
 
     <stop offset="1" style="stop-color:#004444"/> 
 
    </linearGradient> 
 

 
    <linearGradient id="vert" y1="0.5" x2="0" y2="1" spreadMethod="reflect"> 
 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
 
     <stop offset="1" style="stop-color:#004444"/> 
 
    </linearGradient> 
 

 
    <polygon points="0,0, 100,100, 100,0, 0,100" fill="url(#horiz)"/> 
 
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="url(#vert)"/> 
 
</svg>

これが機能する方法は、我々は2砂時計状ポリゴンを持っている、と私たちはそれぞれに線形グラデーションを適用することです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100 100"> 
 

 
    <polygon points="0,0, 100,100, 100,0, 0,100" fill="gold"/> 
 
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="green"/> 
 
</svg>