EN
HTML / CSS - how can I add border to svg element?
1 answers
0 points
How can I add border to my svg element?
Let's say I have the following code:
xxxxxxxxxx1
2
<html>3
<body>4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 100px;">5
<path6
fill="black"7
d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">8
</path>9
</svg>10
</body>11
</html> 1 answer
0 points
You can use stroke and stroke-width properties to create a border for your svg element.
Note:
The stroke may go out of the
vievBox, so you will need to adjust it e.gviewBox="-2 -2 515 515".
Practical example
In this example, we use:
fill- to change the color of the element to yellow,stroke-width- to set the svg element border width,stroke- to set the border color.
xxxxxxxxxx1
2
<html>3
<body>4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 515 515" style="height: 100px;">5
<path6
fill="yellow"7
stroke-width="3px"8
stroke="green"9
d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">10
</path>11
</svg>12
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 518 518" style="height: 100px;">13
<path14
fill="yellow"15
stroke-width="5px"16
stroke="green"17
d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">18
</path>19
</svg>20
<svg xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke" viewBox="-5 -5 525 525" style="height: 100px;">21
<path22
fill="yellow"23
stroke-width="10px"24
stroke="green"25
d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">26
</path>27
</svg>28
</body>29
</html>Note:
You can also use
rgba()colors tofillelement with partly transparent color or assign it tostroketo create semi-transparent border.
0 commentsShow commentsAdd comment
