Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Border radius for the image

See original GitHub issue

Hi,

How can I set border-radius for the image in ng-circle-progress. .html page

<circle-progress
                    [percent]="80"
                    [radius]="30"
                    [outerStrokeWidth]="8"
                    [innerStrokeWidth]="0"
                    [outerStrokeColor]="'#FF0000'"
                    [innerStrokeColor]="'#800000'"
                    [animation]="true"
                    [animationDuration]="400"
                    [imageSrc]="'/assets/images/music.png'"
                    [showImage]="true"
                    [imageHeight]="60"
                    [imageWidth]="60"
></circle-progress>

I want the image src in html itself. Could you please help me in this.

Issue Analytics

State:
Created 4 years ago
Comments:13 (4 by maintainers)

Top GitHub Comments

1reaction

bootsooncommented, Aug 5, 2019

‘border-radius’ does not apply to svg:image element.

We can use ‘clip-path’ like this:

<defs>
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
    <clipPath id="clip">
      <use xlink:href="#rect"/>
    </clipPath>
</defs>

<use xlink:href="#rect" stroke-width="2" stroke="black"/>
<image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>

0reactions

candorthorcommented, Aug 19, 2019

Hi @Eraldo

I have replied it in Rounded image #94. Could you please look into it and check whether it works or not.

Top Results From Across the Web

How To Create Rounded Images - W3Schools

Learn how to create rounded and circular images with CSS. ... Use the border-radius property to add rounded corners to an image. 50%...

Rounded Corners on Images | IANR Media | Nebraska

The CSS property border-radius adds rounded corners on images. Radius values are listed starting with the top left corner and going clockwise around...

border-radius - CSS: Cascading Style Sheets - MDN Web Docs

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, ......

Rounded corners on rectangular image using CSS only

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/ ...

border-radius - CSS-Tricks

The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at...