如何在SVG中将一个圆附加到另一个圆的顶部



我附加了一个jsfiddle示例,其中SVG工作正常,但当我将其添加到我的angular html中时,两个圆圈都出现在不同的位置。

<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
</svg>

工作示例https://jsfiddle.net/7104bgz3/

角度示例-不起作用的地方https://stackblitz.com/edit/angular-sq1dwb

如何使它像jsfiddle示例一样工作?

任何帮助都将不胜感激!

问题出在viewBox属性中:在第二个示例中,您编写了viewbox(小写b(

该属性区分大小写,键入错误不会正确创建SVG视口的维度(和坐标(。

顺便说一句,我投票决定结束这个问题,因为这个问题是由于打字错误造成的

相关内容

  • 没有找到相关文章

最新更新