更改SVG圓形元素的寬度/高度

Question

我會顯示一個圈子列表，但是其中一個圈子比所有其他圈子都大。 我嘗試使用CSS和內聯樣式更改圓的寬度和高度，但是沒有任何效果。 我在這里閱讀了更多有關.svg的信息 。 我嘗試轉換scale屬性，但是這樣做會撤消其他幾件事。 圓形沒有寬高嗎？ 謝謝你的幫助。

我使用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>"; 

Answer 1

我相信我已經找到了您的問題：

您的代碼位於腳本的底部：

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

...可能沒有按照您的想法做。

每次您的php遍歷$ array時，它都會通過增加自身的數量來增加半徑。 我無法說出您的最終目標是什么，但是嘗試將上面的代碼更改為以下代碼：

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

...刪除兩條代碼行。