Applying box-sizing to an SVG

HTML & CSS
1

This should be, 266px by 200px, how do I do that?

How do you apply box-sizing to an SVG?

 <svg class="stackd" width="260" height="194" viewbox="0 0 260 194" aria-hidden="true">
    <circle cx="130.25" cy="95" r="17"></circle>
  </svg>

.playButtond {
  position: relative;
  width: 266px;
  height: 200px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
2

What do you mean by “this”? If you’re referring to the SVG, then I’d suggest setting the width and height to the correct dimensions would be a good start.

You have a class on that SVG. Did you try adding it to the rules for that class?

In fact, using box-sizing: border-box; is now (kind of) considered a best practice. It is even recommended to use it universally in a style sheet, so the box sizing applies to all elements on a page:

* {
    box-sizing: border-box;
}
2 Likes
3

box-sizing: border-box does not work on SVG’s.


 <svg class="stackd" width="260" height="194" viewbox="0 0 260 194" aria-hidden="true">
    <circle cx="130.25" cy="95" r="17"></circle>
  </svg>
4

See, it doesn’t work.

  <svg class="stackd" width="266" height="200" viewbox="0 0 266 200" aria-hidden="true">
    <circle cx="130.25" cy="95" r="17"></circle>
  </svg>
5

Try thus :slight_smile:

How can i svg full width - #2 by John_Betong

6

I just looked at that, and don’t understand it.

7

Did you try this:

I usually do not set the width and height of the SVG, instead set the viewbox dimensions to the maximum width and height of the containg SVG elemets. This makes the SVG container responsive within its parent container.

8

Do you mean like this?

  <svg class="stackd" width="260" height="194" viewbox="0 0 266 200" aria-hidden="true">
    <circle cx="130.25" cy="95" r="17"></circle>
  </svg>
9

The beauty of Scalable Vector Graphics is they can be either a fixed size or can scale to the parent container without any loss of quality.

What did you not understand about my previous post and what changes did you make?

2 Likes
10

You mean like this, removing width height from the SVG?

  <svg class="stackd" viewbox="0 0 266 200" aria-hidden="true">
    <circle cx="130.25" cy="95" r="17"></circle>
  </svg>
11

Did the changes achieve the desired results?

As far as I can see there are three Svg elements used which makes it difficult because they depend upon each other.

My approach would be to apply the Svgs one at a time and test to ensure everything works as expected.

Afterwards continue to apply the remainig Svgs, test again before proceeding.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.