如何获得旋转的线性渐变svg用作背景图像? [英] How to get a rotated linear gradient svg for use as a background image?

问题描述

我已经看到了一些与此相关的问题，所以我希望这不是多余的.理想情况下，我想要一个image/svg+xml，它可以缩放到其容器的100％. Colorzilla 让我从data:image/svg+xml

I've seen a few questions dancing around this, so I hope this isn't too redundant. Ideally, I'd like an image/svg+xml which scales to 100% of it's container. Colorzilla gets me a great start with a 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具有可伸缩性.

Note: the width="100%" height="100%" I'd like to take this gradient and rotate it by, say 65deg The HTML5 canvas API provides a great way for me to build this image and then use .toDataURL() PNG to polyfill IE8 and IE7, but I'd like something scalable for IE9.

所以目标是复制此内容:

So the goal is to replicate this:

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.

with an image/svg+xml that's 100% width and height.

我确实尝试了 http://svg-edit.googlecode.com ，但是界面却少了一些比我想做的编辑类型更直观. 谢谢！

I did try out http://svg-edit.googlecode.com but the interface was less than intuitive for the types of editing I wanted to do. Thanks!

推荐答案

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

To rotate the gradient you can e.g use the 'gradientTransform' attribute, like this:

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

这篇关于如何获得旋转的线性渐变svg用作背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！