Chartist.js，SVG 圆形元素未显示在容器中

Question

我正在使用 Chartist.js 来处理饼图。我想在背景中添加一个简单的圆圈，但由于某种原因，圆圈元素最终出现在左上角，尺寸为 0x0。

这是 SVG：

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" style="width: 100%; height: 100%;" viewBox="0 0 359 219">
        <g class="basecircle">
            <cirlce class="basecircleelement" cx="10" cy="10" fill="black" cr="181.76999999999998">
            </cirlce>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
    </svg>
</div>

我预计 "g.basecircle" 和 "circle.basecircleelement" 应该出现（它应该在容器的中心，但我还没有计算 cx 和 cy），半径为 181.76999999999998 -这个值被计算为clientWidth的一半-，但它最终出现在尺寸为0 x 0

的SVG元素的左上角

有什么我遗漏的吗？

Answer 1

this value is calculated to be half of the clientWidth-, but it ends up in the upper left corner of the SVG element with dimension of 0 x 0

错别字必须更正： circle 而不是 cirlce

半径指定 -r 而不是 cr

Svg canvas 边框以红色方块为界 style = "border: 1px solid red;"

视觉上看到SVG的边框非常方便。当您完成调试应用程序时，可以删除此行。

要将黑色圆圈放在svg的中心canvas，需要设置坐标cx =" 359/2 " cy =" 219/2 "

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie"  viewBox="0 0 359 219" style="border:1px solid red;">
        <g class="basecircle">
            <circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="179.5">
            </circle>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
  
    </svg>
</div>

更新

如果你不希望黑色圆圈完全适合 canvas svg 你需要将其半径设置为 canvas [=20] 高度的一半=]

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie"  viewBox="0 0 359 219" style="border:1px solid red;">
        <g class="basecircle">
            <circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="109.5">
            </circle>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
  
    </svg>
</div>

Chartist.js，SVG 圆形元素未显示在容器中

Chartist.js, SVG circle element is not showing up in the container

svg

chartist.js