欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何用一個(gè)焦點(diǎn)做一個(gè)帶漸變的非整圓筆畫?

我正在嘗試制作下圖所示的元素:

Showing a partial circle radius a gradient

它基于Apple Watch的空氣質(zhì)量小工具。

該圓不是完全圓的,并且跨越該線的梯度發(fā)生變化。除此之外,還有一個(gè)顯示實(shí)際值的“點(diǎn)”(我想用JavaScript來設(shè)置)。

我試著用dasharray和dashoffset制作半圓。但是我不能得到穿過整個(gè)線的梯度。我也不能在不使用物體上的轉(zhuǎn)換:旋轉(zhuǎn)的情況下得到底部圓圈的間隙。

#Layer_1 {
   transform: rotate(135deg);
}
.ring {
   stroke-dasharray:314;
   stroke-dashoffset: 78;
   stroke-linecap: round;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve">

   <circle class="ring" fill="none" stroke="url(#linear)" stroke-width="10" stroke-miterlimit="10" cx="50%" cy="50%" r="50"/>

   <defs>
       <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop offset="0%" stop-color="#05a"></stop>
           <stop offset="50%" stop-color="#a55"></stop>
           <stop offset="100%" stop-color="#0a5"></stop>
       </linearGradient>
   </defs>
</svg>

當(dāng)談到劃劃陣列時(shí),你是在正確的軌道上。在這個(gè)例子中,圓和焦點(diǎn)是使用蒙版制作的。遮罩應(yīng)用于包含四條不同線條的群組,這四條不同線條構(gòu)成了圓形漸變。我知道,問題不在于梯度,但現(xiàn)在它變得很重要,因?yàn)镾VG只有線性和徑向梯度。

document.forms.form01.range.addEventListener('change', e => {
  document.getElementById('point').setAttribute('transform', `rotate(${e.target.value})`);
});

body{
  background-color: #303030;
}

<form name="form01">
  <input type="range" step="10" name="range" min="0" max="270" value="30">
</form>
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="lg1" x1="0" x2="0" y1="55" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="Gold"/>
      <stop offset="90%" stop-color="SpringGreen"/>
    </linearGradient>
    <linearGradient id="lg2" x1="0" x2="0" y1="55" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="DarkOrange"/>
      <stop offset="90%" stop-color="Gold"/>
    </linearGradient>
    <linearGradient id="lg3" x1="0" x2="0" y1="55" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="red"/>
      <stop offset="90%" stop-color="DarkOrange"/>
    </linearGradient>
    <linearGradient id="lg4" x1="0" x2="0" y1="55" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="DarkOrchid"/>
      <stop offset="90%" stop-color="red"/>
    </linearGradient>
    <mask id="m1">
      <circle r="45" stroke="white" stroke-width="10" stroke-linecap="round" stroke-dasharray="270 360" pathLength="360" />
      <g id="point" transform="rotate(30)">
        <circle transform="translate(45 0)" r="6" stroke="black" fill="white" stroke-width="3"/>
      </g>
    </mask>
  </defs>
  <g transform="translate(50 50) rotate(135)" stroke-linecap="round" stroke-width="25" mask="url(#m1)">
    <line transform="translate(50 0) rotate(30)" stroke="url(#lg1)" y2="55" />
    <line transform="rotate(70) translate(50 0) rotate(30)" stroke="url(#lg2)" y2="55" />
    <line transform="rotate(140) translate(50 0) rotate(30)" stroke="url(#lg3)" y2="55" />
    <line transform="rotate(210) translate(50 0) rotate(30)" stroke="url(#lg4)" y2="55" />
  </g>
</svg>

雖然SVG內(nèi)容不直接支持圓錐形漸變,但是您可以將HTML元素與background-image:conic-gradient()和一個(gè)SVG定義的遮罩結(jié)合起來,該遮罩剪切出圓弧和位置標(biāo)記。

對(duì)于弧線,你可以使用一個(gè)圓形和一個(gè)筆畫-dasharray。我發(fā)現(xiàn)用適當(dāng)?shù)幕【€畫一條路徑更容易。pathL ength屬性將有助于沿其長(zhǎng)度進(jìn)行定位,但不是我的解決方案所嚴(yán)格需要的。

有多種方法可以實(shí)現(xiàn)進(jìn)度標(biāo)記,這里我用一個(gè)假的& lt動(dòng)畫情感& gt沿著不真正移動(dòng)的路徑設(shè)置環(huán)形動(dòng)畫。位置被設(shè)置為關(guān)鍵點(diǎn)= & quotx;x & quot屬性,x是0到1之間的一個(gè)數(shù)字,用Javascript設(shè)置。

const marker = document.querySelector('#progress animateMotion');

function position (x) {
  marker.setAttribute('keyPoints', `${x};${x}`);
}

position(0.2);

#progress #arc {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-linecap: round;
}
#progress circle {
  fill: none;
  stroke: black;
  stroke-width: 4;
}

#meter {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: conic-gradient(yellow, green, blue, red, orange, yellow);
  mask: url(#progress);
}

<svg width="0" height="0">
  <mask id="progress" width="100" height="100">
    <path id="arc" d="M 25,85 A 40 40 0 1 1 75,85" pathLength="100" />
    <circle r="7">
      <animateMotion path="M 25,85 A 40 40 0 1 1 75,85"
                     keyTimes="0;1" begin="0s" fill="freeze"
                     keyPoints="0;0" />
    </circle>
  </mask>
</svg>
<div id="meter"></div>