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

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

转载作者：太空宇宙更新时间：2023-11-04 00:58:18

24

4

我不确定还可以做些什么来完成这项工作。我正在尝试将路径中的一条线旋转 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 应如下所示。

红线是第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

文章推荐： javascript - 如何分发可变数量的卡片？

文章推荐： python - 为什么结果在 python Sympy.limit 中不同？

文章推荐： Python - 创建 aws lambda 部署包

前端使用Konva实现可视化设计器（12）-连接线-直线
这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。请大家动动小手，给我一个免费的 Star 吧~ 大家
前端使用Konva实现可视化设计器（22）-绘制图形（矩形、直线、折线）
本章分享一下如何使用 Konva 绘制基础图形：矩形、直线、折线，希望大家继续关注和支持哈！请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue
前端使用Konva实现可视化设计器（19）-连接线-直线、折线
本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Is
collision-detection - 直线-矩形碰撞检测
我有一条线(两点(x，y)(x1，y1))和一个带有焦点(rx，ry)的矩形。我需要帮助找出线和矩形之间的碰撞点，C++ 中的一个例子会有所帮助。最佳答案我不知道如何仅用“焦点”来表示矩形。您将需
python - TkInter:直线/椭圆的像素数
让我们画一条线和一个圆: canvas.create_line(x0,y0,x1,y1) canvas.create_oval(x0,y0,x1,y1) 如何计算每个像素的像素数？最佳答案你不能。
php使用gd2绘制基本图形示例(直线、圆、正方形)
本文实例讲述了php使用gd2绘制基本图形。分享给大家供大家参考，具体如下：应用GD2函数可以绘制的图形有多种，最基本的图形包括条、圆、方形等。无论开发人员绘制多么复杂的图形，都是在这些最基本的
vim - 如何更改 Vim(直线)下划线的颜色？
我已经尝试了所有改变颜色的方法: call s:h("Underlined", {"fg": s:norm, "gui": "underline", "cterm": "underline"})
javascript - 直线 : Why does this yield undefined is not a function?
为什么以下行有时会在 chrome 开发控制台中产生消息“未定义不是函数”: (callbackOrUndefined || function() {})(); 这个想法是，如果回调为真，即函数，则执
c# - 直线(分段拟合)图表是什么意思？如何在MS图表中实现？
我想在 MS Chart 中实现直线(分段拟合)图表。我知道 X 轴上的点 [最小值 = 1.4，最大值 = 2.2]。我已将所有这些点都放在折线图上。现在的要求是我如何知道 X 轴上的点 [最小
javascript - charts.js 直线 - 我找不到解决方案
所以我正在使用 charts.js http://www.chartjs.org/我试图使 2 个点之间的线是直线而不是弯曲的，没有明显的原因。现在看起来是这样的 http://imgur.com/
javascript - 直线 API Microsoft Bot 框架
我已将我的机器人发布到 Azure。现在我要开发自己的聊天用户界面。我想在 JavaScript 中使用 Direct Line API 来调用机器人。如何在 JavaScript 中使用 Dire
python - 找到数字列表的 'shape'(直线/凹/凸，有多少个驼峰)
这个有点难解释。我有一个整数列表。因此，例如，[1, 2, 4, 5, 8, 7, 6, 4, 1] - 当根据元素编号绘制时，它类似于凸图。我如何以某种方式从列表中提取此“形状”特征？它不必特别准确
javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线
我在学习 javaScript 和 jQuery 的第一周，我正在尝试制作一些动画。基本上我想要做的就是让这些箭头从屏幕开始，从一侧进入，通过 throw 目标，然后离开屏幕的另一侧。理想情况下，
AngularJS:动画对象从 DIV A 到 DIV B 直线
假设我有一个向导并且有 3 个部分，假设它是这样的。 [A]----[B]----[C] 假设当前在范围内选择了 A。这是一个彩色的红色圆圈。当 B 在范围内被选中时，就可以移动一个对象(假设一条彩色
node.js - 直线 API : Define a new ChannelId
我正在使用 botframework-directlinejs NodeJS SDK 为我的机器人前端实现一个新 channel 。该 channel 将提供一些自定义反向 channel 功能；但是
apache-spark - 在 Yarn 上运行 Spark 直线
我正在使用直线执行 hql 查询。该作业似乎没有出现在 HDP 2.6 上 Spark History 服务器的资源管理器中。如何让它运行在 Yarn 上？谢谢最佳答案 Beeline 是一个 A
google-maps - Google Maps Api 直线(最短)路线
我目前正在尝试找到一种如何使用 Google Maps Api V3 获得直线路线的方法。我已经设法使用地理编码和方向服务来获取从 A 点到 B 点的路线，包括两条替代路线。我还尝试过“无高速公路”
javascript - 如何使所有绘制的(矩形、圆形、直线、多边形)可拖动？纯JS
我有一个简单的 Canvas html5。它可以通过选择选项绘制一些形状，如直线、圆形、矩形、多边形，但现在我想让所有绘制都可拖动(如果可能的话)可调整大小，没有 3 部分库，只有纯 JS。
hadoop - hive ，直线 : Peer indicated failure: GSS initiate failed
我正在使用在 Kerberos 中添加的帐户启动 beeline 来测试 Sentry: beeline -u "jdbc:hive2://IP:10000/;principal=test_table
javascript - Canvas 直线 ctx.lineTo 的轨迹(y Angular )和(x 到所需长度)
我正在使用普通的 html/javascript Canvas (无库)。我有一种从两点计算 Angular 方法，我的理论是，我获取 Angular 并通过循环所需的水平距离 (x) 并对该 Ang

首页

博学

6Ren·AI

商城

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