CSS徑向漸層到SVG徑向漸變
P粉308783585
P粉308783585 2023-12-11 15:54:09
0
2
568

是否可以在 SVG 中製作徑向漸變,就像在 CSS 中一樣 http://codepen.io/A973C/pen/hnEaf (我指的是交通燈中的燈)

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 15px 15px; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  border: dotted 2px red;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px red;
}

我的 SVG 漸層看起來像這樣 http://jsfiddle.net/x9a2Lyx1/ 我真的不明白如何像 css 範例中那樣重複漸變

P粉308783585
P粉308783585

全部回覆(2)
P粉604669414

嵌入網頁中的 SVG 元素與任何其他元素的處理方式相同,因此您只需使用 CSS 即可實現:

svg {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 3px 3px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: dotted 2px lime;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px lime;
}
<svg width="120" height="120" 
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">       
</svg>
P粉617237727

我使用 SVG 模式解決了這個問題 -> http://jsfiddle.net/k5527kym/

#
<pattern id="muster_c" patternUnits="userSpaceOnUse" width="2" height="2" x="0" y="0">
        <circle cx="1" cy="1" r="2" fill="url(#MyGradient)"/>
</pattern>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!