如何获取旋转的线性渐变SVG以用作背景图片？

Question

我看到有几个问题围绕着这个转，所以希望这不会太冗余。理想情况下，我想要一个能够缩放到其容器的100%的image/svg+xml。 Colorzilla以 data:image/svg+xml 的形式为我提供了很好的起点。

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

注意：width="100%" height="100%"。我想将这个渐变旋转，比如65deg。

HTML5 Canvas API为我提供了一种非常好的方法来构建这个图像，然后使用.toDataURL() PNG来替代IE8和IE7，但我想要一些可伸缩性的东西来适应IE9。

因此，目标是复制这个：

background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%),
linear-gradient(left,  rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%),
linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%),
linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%);
}

使用一个宽高均为100%的image/svg+xml。

我尝试了http://svg-edit.googlecode.com，但接口对于我想进行的编辑类型来说不太直观。 谢谢！

- bodine

Answer 1

要旋转渐变，您可以使用“gradientTransform”属性，例如：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" 
 viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" 
   x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

- Erik Dahlström

---

太好了！谢谢你！ - borkafight

Answer 2

请注意，gradientTransform属性根据其在0,0处的锚点旋转渐变。要从“中心”旋转它，您需要计算x1、y1、x2和y2的正确百分比。以下是一个简单的PHP示例：

// Rotation can be 0 to 360
$pi = $rotation * (pi() / 180);
$coords = array(
    'x1' => round(50 + sin($pi) * 50) . '%',
    'y1' => round(50 + cos($pi) * 50) . '%',
    'x2' => round(50 + sin($pi + pi()) * 50) . '%',
    'y2' => round(50 + cos($pi + pi()) * 50) . '%',
)

- Giel Berkers

---

将旋转原点设置为渐变矩阵的一部分更容易，只需将两个额外的参数作为旋转函数的参数即可。 - Robert Longson

在gradientTransform="rotate(90, 50, 30)"中，旋转的原点将会是坐标为50, 30的点。 - Robert Longson

@Robert 实际上，在SVG中，它与CSS不同，CSS使用逗号作为格式。在SVG规范中，它说变换参数是由空格分隔的"(deg [x y])"，而不是逗号。因此，您的示例可能适用于gradientTransform="rotate(90 50 30)"，但如果您在CSS中使用内联transform=编写它，它确实会像您所写的那样带有逗号。这个微小的差别让我卡了一段时间。参考：https://css-tricks.com/transforms-on-svg-elements/ - OG Sean

根据 https://www.w3.org/TR/SVG/coords.html#TransformAttribute 上的说明，往下滑动到 BNF 部分可以看到这个内容... "rotate" wsp* "(" wsp* number ( 逗号-wsp 数字 逗号-wsp 数字 )? wsp* ")"。 - Robert Longson

当gradientUnits为userSpaceOnUse（默认）时，要将渐变从其中心旋转（这样更容易获得预期的结果），请使用 rotate(<angle> 0.5 0.5)。请注意，翻译保证了准确性和流畅性，但没有提供额外解释或其他内容。 - cdoublev

Answer 3

Giel Berkers的JavaScript解决方案如下：

// angle can be 0 to 360
var anglePI = (angle) * (Math.PI / 180);
var angleCoords = {
    'x1': Math.round(50 + Math.sin(anglePI) * 50) + '%',
    'y1': Math.round(50 + Math.cos(anglePI) * 50) + '%',
    'x2': Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + '%',
    'y2': Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + '%',
}

- Hooman Askari

Answer 4

<linearGradient gradientTransform="rotate(65)">

- Henrik Albrechtsson

---

这个不会在中心旋转。 - undefined