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

Question

我已经看到围绕这个跳舞的几个问题,所以我希望这不是多余的.理想情况下,我想要一个image/svg+xml可以扩展到100%容器的容器. 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%);
}

用image/svg+xml这是100%的宽度和高度.

我确实尝试过http://svg-edit.googlecode.com,但界面对于我想做的编辑类型并不直观.谢谢!

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>

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) . '%',
)

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) + '%',
}

Answer 4

<linearGradient gradientTransform="rotate(65)">