极客观点
项目管理
HarmonyOS
我想要做一个半径50的1/4圆弧 用path 发现实际显示和100 100的circle大小一致 尺寸却显示45 45，请问path的宽度高度怎么计算的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
svg {
width: 100px;
height: 100px;
}
circle, path{
transition: stroke-dasharray 0.25s linear;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient">
<stop offset="0%" stop-color="#43ECF8"></stop>
<stop offset="50%" stop-color="#E8F843"></stop>
<stop offset="100%" stop-color="#1CF7E6"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
<path class="circle" d="M50,5 A45,45 0 0,1 95,50"
stroke="#cccc00"stroke-width="10" fill="none"/>
</svg>
</body>
</html>
stroke, clip, mask 和 filter 都不纳入宽高计算。你的圆弧起于 50,5 止于 95,50 ，外部有 5 是 stroke 的一半。