如何使用旋转值通过变换或数学旋转 SVG 矩形？

【问题标题】：How to rotate an SVG rectangle with a transform or with math using the rotated values?如何使用旋转值通过变换或数学旋转 SVG 矩形？
【发布时间】：2020-01-02 01:27:46
【问题描述】：

我正在使用收到的数据在 SVG 中重新创建一个矩形。只要矩形不旋转，我就可以正确绘制矩形。当它旋转时，它位于错误的位置。

矩形值为：

left: 27
top: 30
width: 100
height: 100
localBoundsWidth: 100
localBoundsHeight: 100

这是未旋转的矩形（位置正确）：

.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 100px;
  height: 100px;
  left: 27px;
  top: 30px;
}
.Line_1 {
  overflow: visible;
  position: absolute;
  top: 30.5px;
  left: 0.5px;
  width: 225px;
  height: 1px;
}
.Line_2 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 27.5px;
  width: 1px;
  height: 197px;
}
<div>
	<svg class="Rectangle_1">
		<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
		</rect>
	</svg>
	<svg class="Line_1">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
		</path>
	</svg>
	<svg class="Line_2">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
		</path>
	</svg>
</div>

这是它的样子（期望的结果）。我已经手动调整了位置：

#Rectangle_1 {
   transform: matrix(0.7660,0.6427,-0.6427,0.7660,64.28,0.5);
}
.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 140.883px;
  height: 140.883px;
  left: 6.558px;
  top: 9.558px;
}
.Line_1 {
  overflow: visible;
  position: absolute;
  top: 30.5px;
  left: 0.5px;
  width: 225px;
  height: 1px;
}
.Line_2 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 27.5px;
  width: 1px;
  height: 197px;
}
.Line_5 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 70.5px;
  width: 1px;
  height: 9px;
}
.Line_6 {
  overflow: visible;
  position: absolute;
  top: 86.5px;
  left: 0.5px;
  width: 6px;
  height: 1px;
}
<div>
	<svg class="Rectangle_1">
		<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
		</rect>
	</svg>
	<svg class="Line_1">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
		</path>
	</svg>
	<svg class="Line_2">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
		</path>
	</svg>
	<svg class="Line_5">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_5" d="M 0 9 L 0 0">
		</path>
	</svg>
	<svg class="Line_6">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_6" d="M 6 0 L 0 0">
		</path>
	</svg>
</div>

当矩形旋转时，我无法在正确的位置绘制它，因为我收到的值是矩形围绕其中心旋转后的 绘制边界。

所以原始未旋转的矩形值为：

left: 27
top: 30
width: 100
height: 100
localBoundsWidth: 100
localBoundsHeight: 100

当它旋转 40 度时，值为：

left: 6.56
top: 9.56
width: 140
height: 140
transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584)
rotation: 40
localBoundsWidth: 100
localBoundsHeight: 100

如果重要的话，其父坐标空间的左上角是：

x: 70.83
y: 9.56

当我尝试使用上述信息（旋转值）创建旋转矩形时，矩形的位置不正确。 

#Rectangle_1 {
  transform: rotate(40deg);
}
.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 100px;
  height: 100px;
  left: 6.56px;
  top: 9.56px;
}
.Line_1 {
  overflow: visible;
  position: absolute;
  top: 30.5px;
  left: 0.5px;
  width: 225px;
  height: 1px;
}
.Line_2 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 27.5px;
  width: 1px;
  height: 197px;
}
<div>
	<svg class="Rectangle_1">
		<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
		</rect>
	</svg>
	<svg class="Line_1">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
		</path>
	</svg>
	<svg class="Line_2">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
		</path>
	</svg>
</div>

当我尝试使用矩阵值时，它的位置也不正确：

#Rectangle_1 {
  transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584);
}
.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 100px;
  height: 100px;
  left: 6.56px;
  top: 9.56px;
}
.Line_1 {
  overflow: visible;
  position: absolute;
  top: 30.5px;
  left: 0.5px;
  width: 225px;
  height: 1px;
}
.Line_2 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 27.5px;
  width: 1px;
  height: 197px;
}

.Line_5 {
  overflow: visible;
  position: absolute;
  top: 0.5px;
  left: 70.5px;
  width: 1px;
  height: 9px;
}
.Line_6 {
  overflow: visible;
  position: absolute;
  top: 86.5px;
  left: 0.5px;
  width: 6px;
  height: 1px;
}
<div>
	<svg class="Rectangle_1">
		<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
		</rect>
	</svg>
	<svg class="Line_1">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
		</path>
	</svg>
	<svg class="Line_2">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
		</path>
	</svg>

	<svg class="Line_5">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_5" d="M 0 9 L 0 0">
		</path>
	</svg>
	<svg class="Line_6">
		<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_6" d="M 6 0 L 0 0">
		</path>
	</svg>
</div>

我只有以下信息可用于正确旋转矩形（旋转值）：

left: 6.56
top: 9.56
width: 140
height: 140
transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584)
rotation: 40
localBoundsWidth: 100
localBoundsHeight: 100

它的父坐标空间的左上角是：

x: 70.83
y: 9.56

是否可以仅使用上述信息（旋转值）将矩形放置在正确的位置？

或者是否可以仅使用上述信息取消旋转矩形以获得原始顶部和左侧值？

仅供参考，矩形已围绕其中心点旋转而不是左上角。

【问题讨论】：

  • 所以你的意思是你只能使用left、top、width、height、transform和rotation来把它放到你想要的地方？我想我也意味着您只能更改#Rectangle_1 CSS 对吗？
  • @Keith 是的，但我必须使用的顶部和左侧值是对象旋转后的 x 和 y。
  • #Rectangle_1 必须有 x=70.83 和 y=9.56 ？
  • @Keith 我已将问题更新为更清晰
  • 我只是好奇你不必转换：旋转 .Rectangle_1 而不是 #Rectange_1 吗？

标签： javascript css svg css-transforms


【解决方案1】：

我希望这就是您要问的： 正如我在您的数据中评论的那样，大小是 140，但是如果您进行数学运算，它应该是 140.88 如果这不适合您，请告诉我。

在下一个演示中，我将计算旋转正方形的顶点在边界框（黑色描边正方形）上的位置，然后通过将顶点的计算点与一个多边形。

// initial data

let hyp = 100;//hypotenuse
let size = 140.88;//the size of the bounding box
let rot = 40*Math.PI/180;//rotation: 40 degs
let tl = {x:6.56,y:9.56};//the top left point

let c1 = Math.sin(rot) * 100;//the length of the first cathetus

//let c2 = Math.sqrt(hyp * hyp - c1*c1)

//the points for the polygon: a rotated square
let p1 = {x:tl.x + c1,y:tl.y}
let p2 = {x:tl.x + size,y:tl.y+c1}
let p3 = {x:tl.x + size - c1,y:tl.y + size}
let p4 = {x:tl.x,y:tl.y + size - c1}

// the points attribute for the polygon
let points =`${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`
poly.setAttributeNS(null,"points",points)
svg{border:1px solid #d9d9d9}
<svg viewBox="0 0 154 160" width="300">
  <!--the rect is drawing the bounding box for the rotated square-->
  <rect x="6.56" y="9.56" width="140.88" height="140.88" fill="none" stroke="black" />
  
  <polygon id="poly" stroke="red" fill="none" />
</svg>

【讨论】：

  • 这真的很有趣，但我不这么认为。原始矩形的位置是 27 x 30。当它旋转 40 度时，它的位置是 6.56 x 9.56。旋转后，我不知道原始的顶部和左侧位置（27x30）。如果我能得到顶部和左侧的位置，我就可以添加一个transform: rotate(40deg); transform-origin: center，它应该位于正确的位置。这是我认为可行的一种方法。如果有办法取消旋转矩形，它可能会提供这些位置。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-01-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode