Làm thế nào để có được một svg dốc tuyến tính xoay để sử dụng làm hình nền?

Question

Tôi đã nhìn thấy một vài câu hỏi nhảy múa xung quanh điều này, vì vậy tôi hy vọng điều này không quá dư thừa. Lý tưởng nhất, tôi muốn một image/svg+xml có tỷ lệ 100% của nó container. Colorzilla được tôi một sự khởi đầu tuyệt vời với một 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> 

Lưu ý: width="100%" height="100%" Tôi muốn lấy gradient này và xoay nó bằng cách, nói 65deg HTML5 canvas API cung cấp một cách tuyệt vời đối với tôi để xây dựng này hình ảnh và sau đó sử dụng .toDataURL() PNG để polyfill IE8 và IE7, nhưng tôi muốn một cái gì đó có thể mở rộng cho IE9.

Vì vậy, mục tiêu là để tái tạo này:

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%); 
} 

với một image/svg+xml đó là 100% chiều rộng và chiều cao.

Tôi đã thử http://svg-edit.googlecode.com nhưng giao diện kém trực quan hơn đối với các loại chỉnh sửa mà tôi muốn thực hiện. Cảm ơn!

Answer 1

Để xoay gradient bạn có thể ví dụ sử dụng thuộc tính 'gradientTransform', như thế này:

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

Xin lưu ý rằng thuộc tính gradientTransform quay gradient theo đó là điểm neo ở 0,0. Để xoay nó từ 'trung tâm', bạn cần tính toán tỷ lệ phần trăm thích hợp cho x1, y1, x2 và y2. Một ví dụ đơn giản 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' giải pháp trong Javascript sẽ là:

// 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)">