用于角度SVG的CSS

Question

我对Angular和SVG非常陌生，我试图让我的图形和关键/图例出现在同一行上。

这是它目前的样子：http://imgur.com/a/KUqo5

这里是我的组件模板：

<svg height="100%" width="100%" [attr.viewBox]="viewBox"> 
    <g> 
     <circle *ngFor="let item of items;let i=index" [attr.cx]="center" 
     [attr.cy]="center" [attr.r]="radius" fill="transparent" 
     [attr.stroke-width]="width" [attr.stroke-dasharray]="perimeter" 
     [attr.stroke-dashoffset]="getOffset(i)" [attr.stroke]="item.color"/> 
    </g> 
</svg> 
<svg *ngFor="let item of items;" width="500" height="75"> 
    <circle cx="50" cy="50" r="20" [attr.fill]="item.color" /> 
    <text x="100" y="50">{{ item.count }}</text> 
</svg> 

任何建议，将不胜感激！

Answer 1

你必须使用<div>和一些CSS风格来对齐你的两个svg数据。或html元素