I am trying to make an svg like as shown below
My svg content is as shown below
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true">
<path d="M2 5h9v9H2z" ></path>
<path d="M5 5V2h9v9h-3"></path>
</svg>
the svg looks like filled as shown below
Can someone please tell me how to make inside of the box white
CodePudding user response:
put the fill attribute in the <path>
fill = "white"
or
fill = "none"
CodePudding user response:
Using <path>
could work out fine if you add the rounded corners to the path itself:
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 16 16">
<path stroke="black" stroke-width="2"
fill="none" d="M 5 5 V 3 A 1 1 0 0 1 6 2 h 8 A 1 1 0 0 1 15 3 v 8
A 1 1 0 0 1 14 12 h -2"></path>
<path stroke="black" stroke-width="2"
fill="none" d="M 2 6 A 1 1 0 0 1 3 5 h 8 a 1 1 0 0 1 1 1 v 8
a 1 1 0 0 1 -1 1 H 3 A 1 1 0 0 1 2 14 z" ></path>
</svg>
An alternative could be to use <rect>
that has the attributes rx
and ry
to control the rounded corners (here just rx
). To cut off the part of the rectangle that overlap you can use a mask.
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 16 16">
<defs>
<mask id="m1">
<rect width="16" height="16" fill="#fff"/>
<rect x="2" y="5" width="10" height="10" rx="1"/>
</mask>
</defs>
<rect stroke="black" stroke-width="2" fill="none" x="5" y="2"
width="10" height="10" rx="1" mask="url(#m1)"/>
<rect stroke="black" stroke-width="2" fill="none" x="2" y="5"
width="10" height="10" rx="1"/>
</svg>