gpt4 book ai didi

html - 锋利的边缘 SVG

转载 作者:行者123 更新时间:2023-11-28 15:53:25 25 4
gpt4 key购买 nike

enter image description here最近我制作了一个 SVG 仪表,但边框看起来不清晰。它有点模糊。如何纠正这个?我尝试了很多,但我无法实现。

https://plnkr.co/edit/TIgs0DZdWmROxWacIJlj?p=preview

Html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<a id="gauge0" class="gauge-container two pointer text-black active" " ng-click="identifierMenu(key) ">
<svg viewBox="0 0 1000 1000 " class="gauge "><path class="dial " fill="transparent" stroke="#eee " stroke-width="20 " d="M 100 500 A 400 400 0 0 1 900 500 "></path><text class="value-text " x="500 " y="550 " font-size="700% " font-family="sans-serif
" font-weight="bold " text-anchor="middle "></text><path class="value " fill="transparent " stroke="#666 " stroke-width="25 " d="M 100 500 A 400 400 0 0 1 616.114 117.224 "></path></svg></a>
</body>

</html>

CSS

/* Styles go here */

body {
width: 100%;
height: 100%;
}

.gauge-container {
width: 12.5%;
height: 152px;
display: block;
float: left;
padding: 0 20px 20px 20px;
overflow: hidden;
}

.gauge-container.two {}

.gauge-container.two > .gauge > .dial {
stroke: #FF634D;
stroke-width: 75;
}

.gauge-container.two > .gauge > .value {
stroke: #00a99d;
stroke-dasharray: none;
stroke-width: 75;
}

最佳答案

问题是绿色圆弧与红色圆弧重叠。

这会在绿色弧线的抗锯齿边框中造成一些红色,使其看起来很糟糕:

为了快速测试,将红色圆弧变小,这样边界就不会重叠:

解决方案是确保圆弧不重叠。

缩小:

关于html - 锋利的边缘 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41521274/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com