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">