0

I need such an inline SVG:

1) it scales to container width,

2) height proportionally scales,

3) elements outside of viewbox(?) are cropped.

Codepen

All three points are satisfied on Chrome. But not ok on IE.

Point 1) above, for IE to scale I have put preserveAspectRatio="xMidYMid slice"

2) If I put svg { height: 100%; }, ok on Chrome, not ok on IE (it should be a square).
Not putting this, IE ok, but Chrome not ok. What can I do?

3) Not cropped on IE. I want a half circle in the bottom, as in Chrome. This thing may rotate so I don't want to draw a half circle by <path>.
svg { overflow: hidden; } is ok only when there is no slice in preserveAspectRatio, that is, no scaling. But I need scaling.

Ksthawma
  • 1,257
  • 1
  • 16
  • 28
  • https://codepen.io/anon/pen/Jyyxoz?editors=1100 – Paul LeBeau Aug 13 '17 at 08:33
  • If you don't like the linked solution, then the alternative is to specify an exact width and height for the SVG. – Paul LeBeau Aug 13 '17 at 08:34
  • @PaulLeBeau The linked solution solves the cropping issue but the SVG does not scale at all to the container on Chrome and IE. The SVG is 300 wide. – Ksthawma Aug 13 '17 at 19:16
  • Then just remove the `width="300" height="300"` from the `` element. – Paul LeBeau Aug 14 '17 at 05:20
  • @PaulLeBeau Then it is like my initial demo, ok on Chrome, height wrong on IE. [link](https://codepen.io/anon/pen/NvaNwa?editors=1100) – Ksthawma Aug 14 '17 at 05:55
  • Sorry, there was an error in my Codepen, the `width` and `height` values in the `` were wrong. I have fixed it now. – Paul LeBeau Aug 14 '17 at 09:45
  • [This](https://codepen.io/anon/pen/KvXqpr?editors=1100) needs no ``, with the use of `clip-path`, and `preserveAspectRatio="xMidYMin slice"` instead of `xMidYMid` – Ksthawma Aug 14 '17 at 12:27

0 Answers0