user1449456 user1449456 - 1 month ago 16
CSS Question

SVG path cut-off by the container

This is my SVG path

My CSS code as follows;

svg {
width: 200px;
height: 200px;
background-color: #2a0800;
}

svg path{
stroke-width: 20;
stroke-opacity: 1;
stroke: #ff682b;
}


The SVG path is cut by the borders of the square. How can I increase the size of this container/black-background dynamically so that that when I increase the stroke-width, I don't get this cut-off.

Answer

Putting padding into the svg solved my problem;

svg {
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}
Comments