Как получить повернутый линейный градиент SVG для использования в качестве фонового изображения?
Я видел несколько вопросов, танцующих вокруг этого, поэтому я надеюсь, что это не слишком излишне. В идеале я бы хотел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 но интерфейс был менее чем интуитивно понятен для типов редактирования, которые я хотел сделать. Спасибо!