向SVG圈添加線性漸變

我想將我從在線獲得的漸變添加到我的SVG圈。這是我的梯度向SVG圈添加線性漸變

background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

我想這種漸變類型添加到我的圈子，而不是「補=」黃色」。我試圖插入的代碼，但沒有梯度。試圖尋找/玩了但是，最終什麼也沒有。這是我的代碼

Codepen http://codepen.io/anon/pen/wdaMVR

.circlesvg{ 
 
    \t \t \t position: absolute; 
 
    \t \t \t left: 0; 
 
    \t \t \t top: 0; 
 
    \t \t }   
 
    \t \t \t #firstCircle{ 
 
    \t \t \t animation: fadeAndScale 33s ease-in infinite; 
 
    \t \t \t -ms-animation: fadeAndScale 33s ease-in infinite; 
 
    \t \t \t -webkit-animation: fadeAndScale 33s ease-in infinite; 
 
    \t \t \t -moz-animation: fadeAndScale 33s ease-in infinite; 
 
    \t \t \t -o-animation: fadeAndScale 33s ease-in infinite; 
 
    \t \t \t transition-timing-function: linear; 
 
    \t \t \t } 
 
    \t \t \t @keyframes fadeAndScale{ 
 
    \t \t \t 0%{ 
 
    \t \t \t z-index: 100; 
 
    \t \t \t transform: scale(0); 
 
    \t \t \t transform: translate(200px, 200px); 
 
    \t \t \t } 
 
    \t \t \t 100%{ 
 
    \t \t \t z-index: 0; 
 
    \t \t \t transform: scale(200); 
 
    
 
    } 
 
    \t \t }

<svg width="100%" height="100%" class="circlesvg"> 
 
    <circle id="firstCircle" cx="0" cy="0" r="40" fill="yellow"></circle> 
 
</svg>

來源

2017-04-15 Jagr

你將不得不使用SVG的<linearGradient>元素，然後引用它作爲填充：

<defs> 
    <linearGradient id="gradient"> 
     <stop offset="0%" stop-color="#a18cd1"/> 
     <stop offset="100%" stop-color="#fbc2eb"/> 
    </linearGradient> 
    </defs> 
    <circle id="firstCircle" cx="0" cy="0" r="40" fill="url(#gradient)"></circle>

http://codepen.io/anon/pen/VbLaYy

來源

2017-04-15 22:24:06

我這樣做，和100％的部分被卡在中間。哇！謝謝：D – Jagr

向SVG圈添加線性漸變

回答

相關問題