3D中的SVG旋轉

我需要在3D中的任意點周圍旋轉SVG文檔中的路徑。 It appears that有多種方法可以通過使用4x4變換矩陣或rotateX或rotateY變換來完成此操作。我已經嘗試了這兩種方法，而且都沒有效果。這些支持哪裏？3D中的SVG旋轉

對於我的應用程序，位圖將成爲最終輸出，所以我並不擔心瀏覽器支持。我對任何工具都很開放 - 我可以通過selenium運行特定的瀏覽器，或者使用獨立的SVG光柵化器。

這是我到目前爲止已經試過（使用谷歌瀏覽31）：

我希望這是一個黑色的矩形，繞X軸，出現就像是一塊梯形。

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px"> 

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
      transform="rotateX(30 580 100)"></rect> 
</svg>

（省略從rotateXcy和cz給出相同的結果）。

我也試過用4x4矩陣。我沒有看到上面的任何區別。我也懷疑我的數學在找到正確的矩陣元素是正確的。

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px"> 

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
      transform="matrix(102400 0 0 0 0 88681.00134752653 -159.99999999999997 1387899.8652473476 0 159.99999999999997 88681.00134752653 -15986.602540378442)"></rect> 
</svg>

來源

2014-01-08 flndr

請發佈您試過的代碼 –

我發現真的沒有辦法在SVG中做任何現代瀏覽器支持的3D旋轉（據我所知）。但是，CSS3確實有一個類似的「變換」屬性。

對我來說，以下工作：

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px"> 

    <rect x="100" y="100" width="440" height="280" fill="#000000" style="-webkit-transform: rotateX(30); -webkit-transform-origin-y: 580px; -webkit-transform-origin-z: 100"></rect> 
</svg>

顯然，這不是一個好的跨瀏覽器解決方案（因爲它使用前綴屬性），但是這不是我需要在我的應用程序。

來源

2014-01-09 19:34:36 flndr

複製到Codepen中，此代碼似乎不起作用。也許需要更多的代碼。 – matanster

FWIW，在Firefox v44中爲我工作的轉換是rotateX（30deg）; –

請注意，「deg」是它工作所必需的。您也可以使用「transform-origin：580px 100px;」（不確定所需的值）來確定元素的樞軸位置。 –

見https://www.w3schools.com/css/css3_3dtransforms.asp：確實CSS代碼{變換：rotateX（##度）}和-Y相似，-Z應在大多數瀏覽器現在的工作沒有前綴。但看起來這些不能合併。所以你可能想要使用更一般的方法：{transform：rotate3d（x，y，z，angle）}，在那裏你可以給任意的旋轉軸。希望有幫助...

來源

2017-10-16 23:28:05 Max

回答

相關問題