Svg 渐变旋转

Question

我在尝试做两种不同的 svg 渐变时遇到了一些麻烦。

第一个应该是：

和第二个类似，但应该旋转另一个 90°（所以 30 + 90 = 120）：

:

因此，第一个从金色变为红色，停止在 90%，应该旋转到 30°。第一个从金色变为红色，停止在 90%，应该旋转到 30°。

<svg width="380" height="760">
  <defs>
    <linearGradient id="myGradient" 
                    gradientTransform="rotate(-30)"
                    >
      <stop offset="0%"  stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
    
    <linearGradient id="myGradient2" 
                    gradientTransform="rotate(-120)"
                    >
      <stop offset="0%"  stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>
  
  <circle cx="190" cy="190" r="190" fill="url('#myGradient')" />
  <circle cx="190" cy="570" r="190" fill="url('#myGradient2')" />
</svg>

没用。我也尝试过使用旋转中心，但似乎没有任何效果。我错过了什么？

Answer 1

SVG 中的渐变是通过给出起点和终点来描述的。您的渐变缺少属性值，因此使用默认值：x1="0%" y1="0%" x2="100%" y2="0%"。您可以声明显式值并停止转换：

<linearGradient id="myGradient" x1="7.3%" y1="25%" x2="93.7%" y2="75%">

如果您使用旋转，请说明它的中心，因为它的默认值是 (0,0)，边界框的左上角。请注意，数字必须是无单位的，并且在 0...1:

范围内

<linearGradient id="myGradient" gradientTransform="rotate(-30 0.5 0.5)">

这样写，渐变有一个隐含的默认属性gradientUnits="objectBoundingBox"。所有数字都相对于使用它们的元素的边界框（圆圈）进行解释。这使得可以在多个地方重复使用相同的渐变，每次都从头到尾遍历颜色。

如果您更喜欢在与使用它们的元素相同的坐标系中使用数字，请设置 gradientUnits="userSpaceOnUse" 并使用无单位数字。但这意味着如果您使用相同的渐变为多个元素着色，它们的起点和终点将不会适应 - 换句话说，渐变会继续跨越元素。

<linearGradient id="myGradient" x1="25.45" y1="95" x2="354.55" y2="285"
                gradientUnits="userSpaceOnUse">

<linearGradient id="myGradient" gradientTransform="rotate(-30 190 190)"
                gradientUnits="userSpaceOnUse">

Svg 渐变旋转

Svg gradient rotation

svg

gradient

linear-gradients