Adakah mungkin untuk menambah kecerunan pada laluan SVG?

Question

Saya ingin meletakkan penunjuk pemuatan mudah di tapak web saya yang dicetuskan oleh skrip. Ia mestilah arka ringkas dengan kecerunan dan berputar sementara pengguna menunggu. Saya belum mencuba bahagian animasi lagi, tetapi saya terjebak dengan gaya statik sekarang. Inilah yang saya dapat setakat ini:

<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>

Ia menarik lengkok mengikut lawan jam dari tepi atas ke tepi kanan (270°), tetapi kecerunannya salah. Imej akhir lejang arka diwarnakan dari kiri ke kanan dalam ruang skrin, bukannya mengikut laluan supaya titik mula (tepi atas, 0°) adalah legap dan titik akhir (tepi kanan, 270°) adalah lutsinar.

Bagaimana saya boleh membuat kecerunan mengikut laluan arka saya?

Answer 1

Mike Bostock menemui jalan, walaupun ia tidak mudah: https://bl.ocks.org/mbostock/4163057

Pada asasnya, teknik ini menggunakan getPointAtLength Untuk membahagikan strok kepada banyak strok pendek, nyatakan hentian warna interpolasi untuk setiap strok, dan kemudian gunakan kecerunan pada setiap strok pendek di antara hentian tersebut.

Semoga berjaya jika anda menyahut cabaran;)

Diedit (3 Julai 2019):

Kini terdapat perpustakaan yang boleh membantu anda melakukan apa yang anda cari. Tidak perlu menggunakan D3, tetapi anda boleh jika anda mahu. Ini adalah tutorial tentang Medium.

Answer 2

Modul Imej CSS - Tahap 4 memperkenalkan conic-gradient . Menurut MDN, Disokong dalam semua pelayar utama kecuali IE.

Walaupun secara teknikal ia bukan kecerunan di sepanjang laluan, kerana laluan anda adalah bulat, anda boleh mencapai hasil yang diingini dengan:

.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; }

<div class="loader"></div>