是否可以為 SVG 路徑新增漸層？-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

是否可以為 SVG 路徑新增漸層？

P粉402806175 2023-10-18 14:55:02

349

我想在我的網站上放置一個由腳本觸發的簡單載入指示器。它應該是一個簡單的圓弧，有漸變並且在使用者等待時旋轉。我還沒有嘗試過動畫部分，但現在陷入了靜態樣式。這是我到目前為止所得到的：

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
        width="100" height="100">
        <defs>
            <linearGradient id="grad1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="red" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M50 10  A40 40 0 1 0 90 50"
            stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
    </svg>

它從上緣逆時針到右邊緣（270°）繪製圓弧，但漸變是錯誤的。圓弧描邊的最終影像在螢幕空間中從左到右著色，而不是沿著路徑使起點（頂部邊緣，0°）不透明而終點（右邊緣，270°）透明。

如何讓漸層遵循我的弧線路徑？

P粉402806175

全部回覆(2)

P粉4821083102023-10-19 13:06:33 2樓

邁克·博斯托克 (Mike Bostock) 找到了一個方法，儘管這並不容易： https://bl.ocks.org/mbostock/4163057

基本上，此技術使用getPointAtLength 要將筆劃分割成許多短筆劃，請為每個筆劃指定插值顏色停止點，然後對這些停止點之間的每個短筆劃應用漸層。

如果您能夠應付挑戰，祝您好運；）

編輯（2019 年 7 月 3 日）：

現在有一個函式庫可以幫助您準確地完成您正在尋找的事情。不需要使用 D3，但如果您願意，也可以使用。這是有關 Medium 的教學.

點贊 +0

新增回覆

P粉5712335202023-10-19 09:37:43 1樓

CSS 圖像模組 - 第 4 級引入了 conic-gradient 。根據 MDN，支援在除 IE 之外的所有主要瀏覽器中。

儘管從技術上講，它不是沿著路徑的漸變，但由於您的路徑是圓形，因此可以通過以下方式實現所需的結果：

.loader {
  --size: 7.5rem;
  --stroke-size: .5rem;
  --diff: calc(calc(var(--size)/2) - var(--stroke-size));
  background-image: conic-gradient(transparent 25%, red);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  -webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
          mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
  animation: rotate 1.2s linear infinite;
  margin: 0 auto;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
body {
  background: #f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover;
  margin: 0;
  min-height: 100vh;
  padding-top: 2.5rem;
}
 * { box-sizing: border-box; }

點贊 +0

新增回覆