console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
</head>
<body>
<div id="app">
<svg class="test" width="500" height="300" style="background-color: rgb(232, 234, 238);">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#5897ee;"></stop>
<stop offset="50%" style="stop-color:#66b7ba;"></stop>
<stop offset="100%" style="stop-color:#eda378;"></stop>
</linearGradient>
</defs>
<path v-for="p in paths" :key="p.index" id="path" d=" M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 20 120" :stroke="p.hex" :stroke-width="p.index" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
<path d=" M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 200 120" stroke="url(#gradient)" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
<circle cx="20" cy="170" r="10" fill="#2274fa" />
<circle cx="50" cy="170" r="10" fill="#e78d48" />
<circle cx="80" cy="170" r="6" fill="#fff" />
<path d="M 76 170 H 84" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
<circle cx="100" cy="170" r="6" fill="#fff" />
<path d="M 96 170 H 104" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
<path d="M 100 166 V 174" stroke="#2274fa" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
<path d="M 120 140 H 250 V 200 H 120 Z" stroke="transparent" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#fff"></path>
<text x="140" y="160" font-family="Verdana" font-size="12">
<tspan x="140" y="160" fill="red">不支持自动换行</tspan>
<tspan x="140" y="180">这是第二行</tspan>
</text>
</svg>
</div>
<script>
const { createApp } = Vue
var paths = getPaths('#dddddd', '#999999', 21)
createApp({
data() {
return {
paths: paths,
message: 'Hello Vue!'
}
}
}).mount('#app')
function getPaths(color1, color2, height) {
var paths = []
var color = {
start: hexToRGB(color1),
end: hexToRGB(color2),
height: height
}
var h = color.height - 1
for (let i = h; i >= 0; i--) {
var c = {
r: color.start.r + (color.end.r - color.start.r) / h * i,
g: color.start.g + (color.end.g - color.start.g) / h * i,
b: color.start.b + (color.end.b - color.start.b) / h * i,
}
paths.push({
index: i,
rgb: `rgb(${c.r}, ${c.g}, ${c.b})`,
hex: rgbToHex(c.r, c.g, c.b)
})
}
console.log(JSON.stringify(paths, null, 2))
return paths
}
function hexToRGB(hex) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return { r: r, g: g, b: b };
}
function rgbToHex(_r, _g, _b) {
var [r, g, b] = [Math.round(_r), Math.round(_g), Math.round(_b)]
var rHex = r.toString(16);
rHex = rHex.length == 1 ? "0" + rHex : rHex;
var gHex = g.toString(16);
gHex = gHex.length == 1 ? "0" + gHex : gHex;
var bHex = b.toString(16);
bHex = bHex.length == 1 ? "0" + bHex : bHex;
return "#" + rHex + gHex + bHex;
}
</script>
</body>
</html>