SVG填充和轉換

據我所知，fill應用於transform後，但我不明白爲什麼。我查看了規範，找不到可能的原因。SVG填充和轉換

我想知道是否有辦法將fill應用於一組元素，其中一些以一致的方式使用transform: rotate。爲了說明問題，請參閱下面的示例代碼：

<svg width='38' height='18' viewBox='0 0 38 18' xmlns='http://www.w3.org/2000/svg'> 
    <defs> 
     <linearGradient id='gradientFill' x2='0' y2='100%' gradientUnits='userSpaceOnUse'> 
      <stop stop-color='hsl(0, 0%, 0%)' /> 
      <stop offset='100%' stop-color='hsl(0, 0%, 100%)' /> 
     </linearGradient> 
     <path id='shape' d='M0,0m9,0c-3.92,0,-7.24,2.51,-8.48,6h3.29c0.83,-1.92,2.8,-3.56,5.19,-3c2.52,0.59,3,3.55,3,6c0,3.6,-0.6,6,-3,6s-3,-2.4,-3,-6h-6c0,4.97,4.03,9,9,9c4.97,0,9,-4.03,9,-9s-4.03,-9,-9,-9z'/> 
     <g id='test'> 
      <use xlink:href='#shape'></use> 
      <use transform='translate(20,0) rotate(180,9,9)' xlink:href='#shape'></use> 
     </g> 
    </defs> 
    <use class='logo' xlink:href='#test' fill="url(#gradientFill)"></use> 
</svg>

如您所見，在非旋轉元素上，漸變從頂部到底部按預期運行。但是，在旋轉元素上，漸變也會旋轉，以便從下到上運行。這似乎與我不一致，因爲fill適用於組而不是單個對象。

我的最終願望是在兩種形狀上都有從上到下的線性梯度流動，但如果可能，我想繼續使用use和transform方法。

有人可以指出我在正確的方向關於規範，也建議一個解決方案來實現我的目標？

來源

2013-06-28 joeyhoer

您應該將您的形狀定義爲剪輯路徑，然後將其應用於用所需漸變填充的矩形。你也可以用過濾器來完成，儘管這有點複雜。

來源

2013-06-29 03:21:46

像「fill」這樣的屬性不是對某個對象進行操作的命令，它們是對象在渲染時使用並由對象的子對象繼承的屬性。就像CSS規則一樣。

要達到所需的效果，請使用Michael的解決方案，或者創建第二個具有x，y和x2，y2的漸變以匹配180度旋轉。您應用轉換時，它談論gradientUnits首先是在SVG specification for gradients規定

來源

2013-07-02 14:17:08

...

如果gradientUnits = 「userSpaceOnUse」， 'X1'， 'Y1'， 'X2' 和 'Y2' 代表在梯度元素被標記爲時（即，通過'填充'或'筆劃'引用梯度元素的元素的用戶座標系統），在當前用戶座標系統就位時產生的座標系統中的值屬性），然後應用屬性'gradientTransform'指定的變換。

如果對元素應用轉換，它會更改元素的座標系，因此也會影響漸變。

來源

2013-07-02 15:12:19

SVG填充和轉換

回答

相關問題