更改 svg 圆形元素的宽度/高度

Question

我正在显示一个圆圈列表，但其中一个比其他所有的都大。我尝试使用 css 和内联样式更改圆的宽度和高度，但没有任何效果。我阅读了有关 .svg 的here 的更多信息。我尝试转换 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;

...删除两行代码。