如何获取旋转的线性渐变 svg 用作背景图像？

我看到了一些围绕这个问题的问题，所以我希望这不是太多余。理想情况下，我想要一个image/svg+xml它可以扩展到容器的 100%。彩色西拉 http://www.colorzilla/gradient-editor让我有一个良好的开端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%"我想采用这个梯度并将其旋转，比如说65degHTML5 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%);
}

with an image/svg+xml这是 100% 的宽度和高度。

我确实尝试过http://svg-edit.googlecode.com http://svg-edit.googlecode.com但对于我想要进行的编辑类型来说，界面不太直观。 谢谢！

要旋转渐变，您可以使用“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>