SVG - 獨立於形狀座標的線性漸變

我想繪製一個線性漸變的svg形狀，就像繪製背景的漸變一樣。所以在下面的示例圖像中，它應該看起來像我只繪製藍色橢圓筆劃。我不能只繪製藍色筆畫的原因是橢圓正在我的具體應用程序中移動到其他對象的上方，並且在藍色筆畫中不應該有任何對象，但它應該看起來像背景......使用常規定義時，漸變橢圓根據由從所述背景的梯度不同的橢圓的，並且形狀計算...謝謝SVG - 獨立於形狀座標的線性漸變

<svg height="400" width="800" > 
    <defs> 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/> 
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" /> 
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" /> 
</svg>

enter image description here

來源

2014-03-06 dorjeduck

您希望它看起來像是透明的（'fill ='none''），但同時您希望它對其下的任何其他圖形不透明？是嗎？ – helderdarocha

是的，我猜這樣的事情，謝謝你看着這個 - 邁克爾的答案似乎做我想 – dorjeduck

一種可能性是使用用戶空間單位的梯度像這樣：

<svg height="400px" width="800px" viewBox="0 0 800 400" > 
    <defs> 
     <linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse"> 
      <stop offset="0" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
      <stop offset="800" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/> 
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" /> 
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" /> 
</svg>

來源

2014-03-06 05:21:18

優秀，非常感謝你 – dorjeduck

SVG - 獨立於形狀座標的線性漸變

回答

相關問題