gpt4 book ai didi

html - 如何将直线的 SVG 路径旋转 90 度

转载 作者:太空宇宙 更新时间:2023-11-04 00:58:18 24 4
gpt4 key购买 nike

我不确定还可以做些什么来完成这项工作。我正在尝试将路径中的一条线旋转 90'。

我已将变换设置为旋转(90 度)。

这是我的代码:

	
* {
margin: 0;
padding: 0;
}
#A {
position: absolute;
box-sizing: border-box;
transform: translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
border: 1px solid #A1A1A1;
background: #E5E5E5;
width: 160px;
height: 160px;
background-color: rgba(255,255,255,1);
overflow: hidden;
opacity: 1;
}
#Line_28 {
opacity: 1;
fill: transparent;
stroke: rgb(0, 68, 253);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_28 {
transform: matrix(1,0,0,1,0,0);
overflow: visible;
position: absolute;
top: 25px;
left: 10px;
width: 30px;
height: 1px;
}
#Line_29 {
opacity: 1;
fill: transparent;
stroke: rgb(253, 0, 0);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_29 {
transform: rotate(90deg);
overflow: visible;
position: absolute;
top: 10px;
left: 25px;
width: 1px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<body>
<div id="A">
<svg viewBox="0 0 30 1" data-name="Line 28" data-type="Line" class="Line_28">
<path id="Line_28" d="M 0 0 L 30 0">
</path>
</svg>
<svg viewBox="0 0 30 1" data-name="Line 29" data-type="Line" class="Line_29">
<path id="Line_29" d="M 0 0 L 30 0">
</path>
</svg>
</div>

</body>
</html>

SVG 应如下所示。

enter image description here

红线是第29行。

最佳答案

如果您将 transform: rotate(90deg); 应用于 Line_28,它将旋转。

* {
margin: 0;
padding: 0;
}
#A {
position: absolute;
box-sizing: border-box;
transform: translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
border: 1px solid #A1A1A1;
background: #E5E5E5;
width: 160px;
height: 160px;
background-color: rgba(255,255,255,1);
overflow: hidden;
opacity: 1;
}
#Line_28 {
opacity: 1;
fill: transparent;
stroke: rgb(0, 68, 253);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_28 {
transform: matrix(1,0,0,1,0,0);
transform: rotate(90deg);
overflow: visible;
position: absolute;
top: 25px;
left: 10px;
width: 30px;
height: 1px;
}
#Line_29 {
opacity: 1;
fill: transparent;
stroke: rgb(253, 0, 0);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_29 {
overflow: visible;
position: absolute;
top: 10px;
left: 25px;
width: 1px;
height: 30px;
}
<html>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<body>
<div id="A">
<svg viewBox="0 0 30 1" data-name="Line 28" data-type="Line" class="Line_28">
<path id="Line_28" d="M 0 0 L 30 0">
</path>
</svg>
<svg viewBox="0 0 30 1" data-name="Line 29" data-type="Line" class="Line_29">
<path id="Line_29" d="M 0 0 L 30 0">
</path>
</svg>
</div>

</body>
</html>

关于html - 如何将直线的 SVG 路径旋转 90 度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54061990/

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