gpt4 book ai didi

javascript - 并排绘制多条 SVG 线

转载 作者:行者123 更新时间:2023-11-28 19:08:06 26 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg width="250" height="250">
<line x1="0" y1="100" x2="0" y2="37" stroke="red" stroke-width="50"></line>
<line x1="50" y1="100" x2="50" y2="37" stroke="blue" stroke-width="50"></line>
</svg>
</body>
</html>

我希望这段代码能够让我并排显示宽度相等的红色条和蓝色条。但事实并非如此,有什么想法吗?

最佳答案

因为笔画宽度从中心向两个方向(左和右)延伸,并且红色矩形的一部分位于 Canvas 边界之外。重叠发生的原因相同:

  <svg width="250" height="250" style="border: 1px solid red;">
<line x1="25" y1="100" x2="25" y2="37" stroke="red" stroke-width="50"></line>
<line x1="75" y1="100" x2="75" y2="37" stroke="blue" stroke-width="50"></line>
</svg>

http://jsfiddle.net/stdob/7atfz12c/

关于javascript - 并排绘制多条 SVG 线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31306321/

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