CODEWITHSUNDEEP
javascriptcsssvg
user1449456
user1449456

Reputation: 642

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.

Upvotes: 1

Views: 5202

Answers (2)

Davis
Davis

Reputation: 3017

It's the svg's viewBox. Sometimes the padding does not working accordingly

Upvotes: 0

user1449456
user1449456

Reputation: 642

Putting padding into the svg solved my problem;

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

Upvotes: 1

Related Questions