2015-09-26 124 views
0

Im顯示一個圓圈列表,但其中一個比其餘的都大。我嘗試用css和內聯樣式來改變圓的寬度和高度,但沒有任何效果。我讀了更多關於.svg的here。我試圖轉換scale屬性,但是解除了其他一些事情。沒有一個簡單的寬度和高度的圓形?謝謝你的幫助。更改svg圈元素的寬度/高度

我使用PHP來回顯svg。繼承人的.svgs我做:

$gCircleX = 106.197; 
 
$gCircleY = 104.197; 
 
$gRad = 60.697; 
 

 
$mCircleX = 106.197; 
 
$mCircleY = 104.197; 
 
$mRad = 60.697; 
 
$x = 0; 
 
$y = 0; 
 

 
$id = 1; 
 

 
$print .= '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" 
 
            height="238px" viewBox="0 0 500 238" enable-background="new 0 0 500 238" xml:space="preserve">'; 
 
        
 
        
 
        
 
        foreach($array as $value){ 
 
         
 
         
 
         $print .= '<g id="Layer_'.$id.'"> 
 
           
 
           <circle class="mon-slice" id="money'.$id.'" '.$scale.' fill="#009245" cx="'.$gCircleX.'" cy="'.$gCircleY.'" r="'.$gRad.'"/> 
 
           <text x="65" y="208">a date</text> 
 
         </g> 
 
         <g id="Layer_'.($id + 1).'" > 
 
           
 
           <circle class="mem-slice mem-16" fill="#333333" cx="'.$mCircleX.'" cy="'.$mCircleY.'" r="'.$mRad.'"/> 
 
           <path class="mem-slice mem-15" fill="#333333" transform="translate('.$x.', '.$y.')" d="M104,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049s-8.554-10.5-11.986-18.364 
 
             c-3.434-7.864-4.434-15.22-4.684-23.417s2.031-16.206,4.937-24.006c2.585-5.72,5.147-10.608,11.854-17.902 
 
             C72,51.25,79.699,49.104,79.699,49.104L104,104c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697 
 
             C165.895,119.25,157.125,164.75,104,164.895z"/> 
 
           <path class="mem-slice mem-14" fill="#333333" transform="translate('.$x.', '.$y.')" d="M104,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049s-8.554-10.5-11.986-18.364 
 
             c-3.434-7.864-4.434-15.22-4.684-23.417s2.031-16.206,4.937-24.006c2.585-5.72,5.147-10.608,11.854-17.902L104,104 
 
             c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697C165.895,119.25,157.125,164.75,104,164.895z"/> 
 
           <path class="mem-slice mem-13" fill="#333333" transform="translate('.$x.', '.$y.')" d="M104,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049s-8.554-10.5-11.986-18.364 
 
             c-3.434-7.864-4.434-15.22-4.684-23.417s2.031-16.206,4.937-24.006L104,104c0-33,0-60.5,0-60.5 
 
             c28.563,0,61.895,19.425,61.895,60.697C165.895,119.25,157.125,164.75,104,164.895z"/> 
 
           <path class="mem-slice mem-12" fill="#333333" transform="translate('.$x.', '.$y.')" d="M105,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049s-8.554-10.5-11.986-18.364 
 
             c-3.434-7.864-4.434-15.22-4.684-23.417L105,104c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697 
 
             C166.895,119.25,158.125,164.75,105,164.895z"/> 
 
           <path class="mem-slice mem-11" fill="#333333" transform="translate('.$x.', '.$y.')" d="M105,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049s-8.554-10.5-11.986-18.364L105,104 
 
             c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697C166.895,119.25,158.125,164.75,105,164.895z"/> 
 
           <path class="mem-slice mem-10" fill="#333333" transform="translate('.$x.', '.$y.')" d="M105,164.895 
 
             c-5.121-0.056-14.795-0.902-22.655-4.867c-8.608-4.342-15.896-9.022-20.175-14.049L105,104c0-33,0-60.5,0-60.5 
 
             c28.563,0,61.895,19.425,61.895,60.697C166.895,119.25,158.125,164.75,105,164.895z"/> 
 
           <path class="mem-slice mem-9" fill="#333333" transform="translate('.$x.', '.$y.')" d="M105,164.895 
 
             c-5.121-0.056-14.615-1.28-22.655-4.867L105,104c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697 
 
             C166.895,119.25,158.125,164.75,105,164.895z"/> 
 
           <path class="mem-slice mem-8" fill="#333333" transform="translate('.$x.', '.$y.')" d="M166.697,104.197 
 
             c0,33.521-26.697,60.697-60.697,60.697c0,0,0-27.176,0-60.697s0-60.697,0-60.697C140,43.5,166.697,70.676,166.697,104.197z"/> 
 
             
 
           <path class="mem-slice mem-7" fill="#333333" transform="translate('.$x.', '.$y.')" d="M131.521,159.511 
 
             L105,104c0-33,0-60.5,0-60.5c28.563,0,61.895,19.425,61.895,60.697C166.895,118.75,162.241,143.858,131.521,159.511z"/> 
 
             
 
           <path class="mem-slice mem-6" fill="#333333" transform="translate('.$x.', '.$y.')" d="M149.198,147.034 
 
             L106,104c0-33,0-60.5,0-60.5c28.563,0,59.532,19.447,60.895,60.697C167.062,109.266,166.92,129.75,149.198,147.034z"/> 
 
           <path class="mem-slice mem-5" fill="#333333" transform="translate('.$x.', '.$y.')" d="M163.112,125.334 
 
             L106,104c0-33,0-60.5,0-60.5c28.561,0,59.532,19.447,60.895,60.697C167.062,109.266,165.897,116.916,163.112,125.334z"/> 
 
           <path class="mem-slice mem-4" fill="#333333" transform="translate('.$x.', '.$y.')" d="M167.188,105H106 
 
             c0-33,0.197-61.5,0.197-61.5C140.197,43.5,167.385,70.25,167.188,105z"/> 
 
           <path class="mem-slice mem-3" fill="#333333" transform="translate('.$x.', '.$y.')" d="M160.561,77.475 
 
             L106,104.197c0-33.521,0-60.697,0-60.697S142.5,41.75,160.561,77.475z"/> 
 
           <path class="mem-slice mem-2" fill="#333333" transform="translate('.$x.', '.$y.')" d="M146.284,58.721 
 
             L106,104.197c0-33.521,0-60.697,0-60.697S127.5,41.875,146.284,58.721z"/> 
 
           <path class="mem-slice mem-1" fill="#333333" transform="translate('.$x.', '.$y.')" d="M126.143,46.854 
 
             L106,104.197c0-33.521,0-60.697,0-60.697S116.071,42.57,126.143,46.854z"/>'; 
 
    
 
         
 
         $gCircleX = 106.197 * 4; 
 
         
 
         $gRad += 60.697; 
 
         
 
         $mCircleX = 106.197 * 4; 
 
         
 
         $mRad += 60.697; 
 
         $id += 2; 
 
         $x = 106.197 * 3; 
 
         $print .= "</g>"; 
 
       } 
 
$print .= "</svg>";

+0

你能發佈你正在使用的代碼嗎? – Joseph

回答

2

我相信我已經找到你的問題:

您的代碼在腳本的底部:

$gCircleX = 106.197 * 4; 
$gRad += 60.697; 
$mCircleX = 106.197 * 4; 
$mRad += 60.697; 
$id += 2; 
$x = 106.197 * 3; 

。可能不會做你的想法。

每次你的php遍歷你的$數組時,它會通過向自身添加數量來增加你的半徑。我無法分辨您的最終目標是什麼,但請嘗試將以上代碼更改爲以下內容:

$gCircleX = 106.197 * 4; 
$mCircleX = 106.197 * 4; 
$id += 2; 
$x = 106.197 * 3; 

...通過刪除您的兩行代碼。

+0

謝謝。這解決了我不得不改變寬度和高度的問題。我現在更瞭解這個圈子。半徑的作用類似於寬度和高度,並保持形狀爲圓形。再次感謝。圓圈是順便說一句餅圖。 – Zapp