svg circle in html5 | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

svg circle in html5

how i can fill the circle with image ??I try the below code but its not work can anybody help me please ?? <svg width="2000" height="2000"> <circle cx="400" cy="400" r="300" style="fill:download.jpg; stroke:yellow; stroke-width:3;" /> </svg>

23rd Mar 2019, 5:58 AM
Sanaa Hareb
Sanaa Hareb - avatar
4 Answers
+ 4
background-image : url('http://..../..jpg')
23rd Mar 2019, 7:10 AM
Gordon
Gordon - avatar
23rd Mar 2019, 7:28 AM
Calviղ
Calviղ - avatar
+ 1
An image fill for an svg element is achieved through SVG Patterns. <svg width="700" height="660"> <defs> <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> <image x="0" y="0" xlink:href="url.png"></image> </pattern> </defs> <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/> </svg>
14th Sep 2020, 1:04 AM
Arnaldo B. Basterretche
Arnaldo B. Basterretche - avatar
- 1
Check it out guy's https://code.sololearn.com/W4lzcVDX6qOK/?ref=app Super Man logo Using SVG
16th Jul 2020, 9:20 AM
Naveen Hiremath
Naveen Hiremath - avatar