Có cách nào để thực hiện 'góc nghiêng' trong SVG không?SVG góc nghiêng
(Tôi không biết thuật ngữ chính thức - đó là loại Gradient bạn thấy trong màu hái, nơi mà nó thay đổi theo góc.)
SVG dường như chỉ hỗ trợ tuyến tính và gradient xuyên tâm, nhưng tôi suy nghĩ có thể có một số cách để sử dụng một biến đổi để mô phỏng những gì tôi muốn.
cảm ơn!
Không có hỗ trợ tiêu chuẩn để thực hiện góc nghiêng (hình nón).
Nhưng hãy xem http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient đối với một số phương pháp xấp xỉ (mã nguồn không được bao gồm, mặc dù). Các ví dụ về liên kết đó không hoạt động.
Tìm tốt. Và một điều gọn gàng về SVG là nó * là * mã nguồn. Giống như HTML, nếu bạn có thể nhìn thấy nó, không có cách nào cho mã nguồn * không * được bao gồm. :-) – Ken
Xin chào Ken, tôi không biết làm thế nào nó có thể giúp trừ khi tôi có nguồn. Tôi không thể chỉ hardcode đường dẫn svg trong trang của tôi để tạo ra gradient. ví dụ. Tôi đang tìm một gradient góc trên một vòng cung tròn. – Tintin
@ken không phải lúc nào cũng đúng ... tôi có vẻ như một số chương trình vẽ các bản đồ khổng lồ tất cả trong 10kb + đường dẫn đơn bằng cách sử dụng thuộc tính d ... Không dễ đọc đến mức tôi có thể thêm. –
http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg sử dụng kỹ thuật đổi mới để ước tính nó.
nó nhúng một hình ảnh png để hiển thị các vòng tròn gradient .. nó không phải là một đồ họa vector thực sự. chỉ những nét được thực hiện với đường dẫn. –
Dưới đây là một gradient vector hình nón có thể, nhưng chỉ VML (+ IE) có thể làm điều đó ...:
Trong câu trả lời của tôi cho câu hỏi tương tự như này, tôi sử dụng sáu gradient tuyến tính để xấp xỉ một hình nón gradient. Nếu bạn chỉ cần gradient cho đột quỵ/chu vi của một vòng tròn, chứ không phải là điền, sau đó nó phải là một xấp xỉ đủ tốt.
Điều này có vẻ và tuyệt vời! Nhưng bất kỳ lời đề nghị làm thế nào để tôi khái quát nó cho một vòng cung với bán kính bên ngoài và bên trong nhất định? Cảm ơn rất nhiều! – Tintin
Bạn có thể bị gián đoạn màu khi hai gradient tuyến tính gặp nhau. Có lẽ nơi an toàn nhất để căn chỉnh linearGradients với sẽ là góc của bán kính bên trong. Bởi vì sau đó là khu vực hình tam giác giữa nơi hai gradient kết thúc sẽ là tất cả cùng một màu sắc. Câu trả lời đó có đáp ứng được câu hỏi của bạn không? –
Xin chào, tôi cần một gradient dọc theo một cung tròn giống như bạn, nhưng tôi cần nó thay đổi giữa 2 màu chỉ - xanh dương đến tím ... nhưng không có vấn đề gì kết hợp màu sắc tôi thử hoặc có bao nhiêu đoạn tôi chia vòng cung của tôi thành - Tôi không nhận được gradient thích hợp. Bạn có thể đăng/cập nhật câu trả lời của mình với độ dốc thay đổi chỉ giữa 2 màu, ví dụ: màu xanh để voilet! Cảm ơn – Tintin
Sau đây là cách để làm điều đó bằng mô hình: https://jsfiddle.net/prozoroff/8eodzrke/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<defs>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
<g transform="rotate(0, 300, 300)">
<rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
<rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
</g>
</pattern>
</defs>
<path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>
Vui lòng thêm một số tài liệu/giải thích. –
Tôi nghĩ rằng bạn đang mô tả một gradient xuyên tâm với nhiều màu sắc. Bạn có thể hiển thị hình ảnh về những gì bạn đang cố gắng tạo không? – SLaks