旋轉SVG中的對象

我剛剛開始使用SVG，現在正在嘗試旋轉對象。旋轉SVG中的對象

我有初始畫布，並創建了我自己的拖放功能，所以在拖動鼠標拖動被初始化和mouseup停止。我遇到的問題是當我旋轉一個對象時，它似乎改變了x和y。這是可見的，當我試圖拖動一個對象。有誰知道如何解決這個問題，這樣x和y就相對於旋轉角度而言是「正常化的」？

這是我的代碼。

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

由於

來源

2012-02-29 tmutton

rotate參數給你的角度和所述旋轉中心（參見MDN例如）。那麼你的文本中的width和height屬性呢？這不是here的標準的一部分。如果您想更改文字的大小，請在樣式中使用font-size。

如果你想繞其（文本元素的）中央的文字，你可以使用例如以下：

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" width="900" height="400" xmlns="http://www.w3.org/2000/svg"> 
    <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;"> 
    SVG test 
    </text> 
</svg>

來源

2012-02-29 15:20:28 Sirko

width和height屬性只是我瞎搞。不幸的是，你的代碼不適合我，它與上次的結果相同。根據我的理解，x和y是對象的左上角，但是當對象旋轉時，x和y點隨着旋轉移動。所以風格屬性不應該是'左上角'還是等價的？ – tmutton 2012-02-29 15:34:55

你能提供一個包含你的拖放代碼的jsfiddle嗎？ – Sirko 2012-02-29 15:39:32

在這裏，你去http://jsfiddle.net/pKwkj/2/頁面上有很多垃圾，因爲我只是測試的東西。在頁面加載時，單擊頁面左上角的文本鏈接，您將看到一些文本出現在屏幕左側（可拖動）。添加文本對象的點擊事件是$（'。add.text'）。點擊 – tmutton 2012-02-29 15:51:08

旋轉SVG中的對象

回答

相關問題