我显示一个圆圈列表,但其中一个比其他所有圆圈都大。我尝试用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>";
答案 0 :(得分: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;
...删除两行代码。