我正在嘗試制作下圖所示的元素:
它基于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>