CODEWITHSUNDEEP
cssangularsvg
Alan
Alan

Reputation: 399

CSS for SVGs in Angular

I'm very new to Angular and SVG and I'm trying to get my graph and the key/legend to appear on the same line.

This is what it currently looks like: https://i.sstatic.net/wZJ2b.jpg

Here is my component template:

<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>

Any advice would be much appreciated!

Upvotes: 1

Views: 56

Answers (1)

sancelot
sancelot

Reputation: 2063

you have to use <div> and some css style to align your both svg data. or html element

Upvotes: 1

Related Questions