javascript - 如何使用 CSS 以 x=50，y=50 为中心旋转一条线(x1=50，y1=50，x2=50，y2=10)？

Question

这有点像绕 z 轴旋转。开始了解 transform-origin 但它接受 % 这对我不起作用。请协助

Answer 1

如果我没理解错的话，您是在尝试使用 CSS 转换 SVG 线条。不幸的是，这不会跨浏览器兼容。非跨浏览器兼容版本采用 px 值并将其视为 SVG 单位。你可以这样做:

transform: rotate(30deg);
transform-origin: 50px 50px;

但是，为了跨浏览器兼容，您必须在 SVG 行内进行转换:

<line x1="50" x2="50" y1="50" y2="10" transform="rotate(30 50 50)" />

这是围绕点 50、50 旋转 30 度。希望对您有所帮助。