旋转矩形围绕SVG

自己的心我有以下一段代码：旋转矩形围绕SVG

<svg> 

<defs> 
<rect id = "myRect" 
     x = "10" 
     y = "10" 
     height = "120" 
     width = "120" 
     stroke-width = "2px" 
     stroke = "red" 
     fill = "blue" /> 

</defs> 


<g transform = "translate(100,30)"> 
    <use xlink:href = "#myRect" /> 
</g> 

<g transform = "translate(100, 100) rotate(45 ? ?)"> 

    <rect id = "myRect" 
     x = "10" 
     y = "10" 
     height = "120" 
     width = "120" 
     stroke-width = "2px" 
     stroke = "green" 
     fill = "yellow" /> 
</g> 

</svg>

当我翻译不旋转矩形，它工作正常。但是当我旋转它时，我想旋转它的中心轴点。我需要通过什么来旋转属性？

来源

2013-02-28 Vinay Bagale

具有相同id（myRect）的两个元素会造成麻烦。 – 2013-02-28 15:12:21

你只需要添加一半的矩形的宽度/高度来获得其中心。

<g transform = "translate(100, 100) rotate(45 60 60)">

查看transform documentation的旋转功能了解更多信息。

来源

2013-02-28 15:15:27

作为说明，语法是'rotate（degree x y）'，所以如果你的矩形例如是“half width/height”，那么它就不是“half width/height”。以100x100 viewBox为中心，然后简单地旋转（45 50 50）'。 – Ciantic 2015-12-31 19:59:34

只需添加到此答案，您可以将'transform'属性直接应用于''元素，如果只有一个形状，则不需要使用“”（组）。我对SVG标准仍然很陌生，这对我来说并不是很明显，也许它会为他们节省一些时间。 – 2017-02-25 16:28:28

如果您从点（0,0）（即OP案例）开始绘制矩形，则接受的答案有效。但对我来说不是！

这里是我工作：

为了得到直角坐标我用$('#rectID').getBBox() 方法，应该返回[矩形高度，矩形宽度，矩形-Y，矩形X]
中心点为（RECT-X +（矩形宽度/ 2），矩形-γ+（矩形高度/ 2））

这是我的浏览器控制台上使用的一个片段：

var coord = $('#elemID')[0].getBBox(); 
coord.x + (coord.width/2) +' '+ coord.y + (coord.height/2)

来源

2015-08-17 07:49:40 Nimir

OP甚至没有提到这将显示在浏览器中，JavaScript与什么有什么关系？更不用说jQuery ... – 2017-05-11 13:41:41

旋转矩形围绕SVG

回答

相关问题