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

Posted 2023-03-06

【中文标题】如何获得旋转的线性渐变 svg 用作背景图像？

【英文标题】：How to get a rotated linear gradient svg for use as a background image?

【发布时间】：2012-02-19 23:49:26

【问题描述】：

我已经看到了一些围绕这个问题的问题，所以我希望这不是太多余。理想情况下，我想要一个image/svg+xml，它可以扩展到其容器的 100%。 Colorzilla 让我有了一个很好的开始 data:image/svg+xml

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"   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"   fill="url(#grad-ucgg-generated)" />
</svg>

注意：width="100%" height="100%" 我想采用这个渐变并旋转它，比如65deg html5 画布 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，但对于我想做的编辑类型来说，界面不太直观。 谢谢！

【参考方案1】：

要旋转渐变，您可以使用 'gradientTransform' 属性，如下所示：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"   
 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"   fill="url(#grad-ucgg-generated)" />
</svg>

【讨论】：

太棒了！谢谢！

【参考方案2】：

<linearGradient gradientTransform="rotate(65)">

【参考方案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) + '%',

【参考方案4】：

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

【讨论】：

更容易在 gradientTransform 中设置旋转原点作为旋转的两个附加参数

in gradientTransform="rotate(90, 50, 30)" 旋转的原点是 50, 30

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

@OGSean Per w3.org/TR/SVG/coords.html#TransformAttribute - 向下滚动到 BNF 看到这一点... "rotate" wsp* "(" wsp* number (comma-wsp number 逗号-wsp number )? wsp* ")"

@RobertLongson 与 Chrome 我似乎能够同时获得两种工作方式，我的错误。