là nó có thể làm cho màu sắc vòng tròn SVG điền từ dưới lên trên dựa trên tỷ lệ phần trăm?

Question

<svg viewbox="-20 -20 100 100"> 

    <circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2"> 

</svg> 

Cách điền vào vòng tròn như sau dựa trên tỷ lệ phần trăm !!

http://i.stack.imgur.com/gVAN5.png

Xin cảm ơn trước.

Answer 1

bạn có thể sử dụng một gradient với stop-opacity để làm điều này. bạn sẽ thêm hai điểm dừng "giữa" với độ mờ là 0 và 1 tương ứng là đặt độ lệch của cả hai thành phần trăm bạn cần.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> 
 
    <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
     <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
     <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> 
 
     <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> 
 
     <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
    </linearGradient> 
 
    <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
</svg>

bạn thậm chí có thể animate nó

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> 
 
     <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
 
      </stop> 
 
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
 
      </stop> 
 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
     </linearGradient> 
 
     <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
</svg>

lợi thế là điều này hoạt động trên bất kỳ hình dạng và kích thước mà không thay đổi gradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="400" height="200"> 
 
     <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> 
 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
     </linearGradient> 
 
     <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <circle cx="250" cy="150" r="145" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <rect x="400" y="20" width="100" height="100" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <path d="M50 150L95 290 h-90z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 

 
    <path d="M450 205 A45 45 0 0 1 450 295A100 100 0 0 0 450 205z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    </svg>

Answer 2

Cách dễ nhất để thực hiện việc này là tạo mặt nạ với lỗ tròn trong đó, sau đó tạo hình chữ nhật phía sau nó. Ví dụ:

<path fill="#fff" fill-rule="evenodd" 
     d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/> 

Các dữ liệu đường dẫn ở đây bắt đầu với một hộp vuông 200 đơn vị rộng (M0 0 200 0 200 200 0 200Z) và sau đó sử dụng hai vòng cung để vẽ một vòng tròn có đường kính 80 đơn vị bên trong nó (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). Quy tắc điền evenodd đảm bảo rằng vòng tròn được cắt ra khỏi hình vuông.

Nếu bạn muốn vòng tròn để điền từ dưới lên trên, sau đó bạn sẽ phải sử dụng một chuyển đổi rotate:

<rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/> 

này quay các hệ tọa độ vào khoảng giữa của hình ảnh SVG để rect lớn lên khi bạn tăng chiều cao của nó. Ở đây, tôi đang sử dụng một quá trình chuyển đổi CSS để thay đổi chiều cao của rect khi bạn di chuột qua nó. Nhưng bạn có thể sử dụng Javascript hoặc JQuery để thay đổi chiều cao thành bất kỳ thứ gì bạn muốn.

Dưới đây là một ví dụ làm việc:

svg #fillup { height:0px; transition:height 0.5s; } 
 
svg:hover #fillup { height:160px; }

<svg width="200" height="200" viewBox="0 0 200 200"> 
 
    <rect x="10" y="10" width="180" height="180" fill="#eee"/> 
 
    <rect transform="rotate(180 100 100)" x="20" y="20" 
 
     width="160" height="0" fill="#47f" id="fillup"/> 
 
    <path fill="#fff" fill-rule="evenodd" 
 
     d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 
 
      180 100 80 80 0 0 0 20 100Z"/> 
 
    <circle cx="100" cy="100" r="90" fill="none" stroke="#888" 
 
      stroke-width="20"/> 
 
    <circle cx="100" cy="100" r="99" fill="none" stroke="#333" 
 
      stroke-width="1"/> 
 
    <circle cx="100" cy="100" r="80" fill="none" stroke="#333" 
 
      stroke-width="1"/> 
 
</svg>