如何根據角度指定svg線性漸變

我想以正確複製CSS線性漸變行爲的方式指定SVG線性漸變。例如，在CSS漸變中，您可以分別指定漸變的開始和結束位於框的左上角和右下角。當框調整大小時，背景漸變會自動適應新的大小。如何根據角度指定svg線性漸變

以我的第一次嘗試，我複製一個CSS線性梯度用SVG，通過指定的角度，並且通過計算X1，Y1，X2，Y2從箱尺寸座標。但是，如果框被調整大小，漸變的角度不會改變，並且不再正確。（我將不得不重新計算所有的座標）。

我的下一個嘗試是使用變換來旋轉漸變。下面是一些代碼：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
     gradientTransform="rotate(-45 150 50)"> 
    <stop stop-color="#FF0000" offset="0"/> 
    <stop stop-color="#00FF00" offset="0.5"/> 
    <stop stop-color="#0000FF" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" /> 
</svg>

現在，這個工程的規模（300,100）的盒子，但你會看到，我不得不爲旋轉中心（150,50）指定絕對值。

我可以用百分比來指定中心嗎？最後，我希望漸變的角度適應盒子的尺寸。

來源

2012-02-24 Jules

是gradientUnits = 「objectBoundingBox」 gradientTransform = 「旋轉（-45 0.5 0.5）」你所要尋找的？ – 2012-02-24 17:49:17

我想我已經嘗試過，因爲我開始使用objectBoundingBox，但我會再試一次... – Jules 2012-02-24 18:03:53

我只是試了一遍，它不起作用。看起來要做的是計算方框上的旋轉漸變，因此-45從一個角落到另一個角落。然後它似乎拉伸寬度，保持漸變。如果盒子是100x100，那麼角度是正確的，但在我的例子中，角度結果是錯誤的。 – Jules 2012-02-24 18:09:34

SVG只允許梯度變換旋轉起源是specified in terms of absolute coordinates。您需要使用JavaScript動態設置旋轉原點，以便完成我認爲您期望的操作：旋轉漸變，還可以使顏色停止均勻分佈在包含框中。

來源

2012-02-24 19:29:17

感謝您的回覆。我想要做的就是模仿CSS線性漸變。網上的所有示例都使用根據邊或角原點指定的漸變。這很容易在svg中模仿，並且如果該框被調整大小，效果不會改變。通過計算x1，y1，x2，y2座標或圍繞中心旋轉，也可以模擬根據角度指定的CSS漸變。調整框的大小時會出現問題。爲了清楚起見，你是否說當調整框的大小時，必須重新計算座標以保持與CSS漸變的對等性？ – Jules 2012-02-24 21:09:10

是的，這就是我所說的。 – 2012-02-24 23:38:56

如何根據角度指定svg線性漸變

回答

相關問題