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

时间：2019-01-06 13:30:26

标签： html css svg

我不确定还可以做些什么。我正在尝试在路径中旋转线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号线。

2 个答案:

答案 0 :(得分：1)

如果将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>

答案 1 :(得分：1)

由于设置了rotate(90deg)，因此必须像width一样使用height（并且height变成width）

因此设置.Line_29 {...left: 10px;width: 30px;} 

	
	* {
		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: 10px;
		width: 30px;
		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>

相关问题
最新问题