我正在嘗試在我正在處理的應用程式中使用漸變，但我遇到了問題。我專門使用userSpaceOnUse，因為我希望它均勻地應用于我的 SVG。但是，當我嵌套 SVG 時，漸變不再均勻應用。如果您檢查我添加的代碼段，您可以看到這一點。
我玩過，認為這可能與viewBox有關，但我無法修復它。
有可能解決這個問題嗎？使用我添加的示例，我希望嵌套的 SVG 與它后面的矩形完美匹配。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="gradient" x1="0%" x2="0%" y1="100%" y2="0%">
<stop offset="0" stop-color="#FCAF45"></stop>
<stop offset="1" stop-color="#833AB4"></stop>
</linearGradient>
</defs>
<g fill="url(#gradient)">
<rect height="100%" width="100%" x="0" y="0"></rect>
<svg x="20" y="20" width="10" height="10"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect height="24" width="24" x="0" y="0"></rect>
</svg>
</g>
</svg>uj5u.com熱心網友回復：
userSpaceOnUse定義為
在參考漸變元素時將當前用戶坐標系置于適當位置所產生的坐標系
這意味著它是繪制的區域坐標系。漸變是為封閉元素在詞法上<rect>定義的并沒有什么區別- CSS 繼承意味著它僅在被.<g><rect>
因此，<rect>嵌套內部的坐標系<svg>必須與其應用于的任何其他元素相同。元素總是建立自己的視口，只有當其等效變換是單位矩陣<svg>時，您才能使它們的坐標系匹配。
實際上，當
- 沒有
viewBox屬性，并且x和y屬性的值都為 0 - 或屬性的所有值都
viewBox等于x、y和屬性值。widthheight
不管你怎么做，你必須寫嵌套的子元素，<svg>就好像它們是外部元素的子元素一樣——你也可以把它省略掉，這沒有什么區別。1尤其是幾何屬性<rect>必須是改變了。
另請注意，百分比值與本地視口大小有關。對于嵌套<svg>，這是它們的widthand height，與根不同<svg>。因此，您必須px為梯度大小使用（隱式或顯式）單位。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="gradient" x1="0" x2="0" y1="50" y2="0">
<stop offset="0" stop-color="#FCAF45"></stop>
<stop offset="1" stop-color="#833AB4"></stop>
</linearGradient>
</defs>
<g fill="url(#gradient)">
<rect height="100%" width="100%" x="0" y="0"></rect>
<svg x="20" y="20" width="10" height="10" viewBox="20 20 10 10">
<rect x="20" y="20" height="10" width="10"></rect>
</svg>
</g>
</svg>1嗯，差不多。在視口邊界處應用了剪輯路徑。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437791.html
標籤：svg