0

How do I get the SVG to clip inside its container? I would like the blue circle not to be visible outside the red rectangle (like overflow:none; for divs). Although in this example, the SVG is a circle, in my case, it's a complicated SVG.

#text {border:1px solid green;}
#svg_container {height: 50px;border:1px solid red;}
svg {
  position: absolute;
  top: -40px;
  left: -65px;
}
<div id="text">
  The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
  <svg viewbox="-3 -3 9 9" width="180px">
    <circle fill="darkblue" cx="3" cy="3" r="3" />
  </svg>
</div>
<div id="more-text">
  No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>
lmat - Reinstate Monica
  • 7,289
  • 6
  • 48
  • 62
  • 1
    Do you really want to position the `` relative to the `` element, and not in relation to its container? – ccprog Oct 26 '22 at 13:17
  • @ccprog No. In my example, I added `will-change: 'transform'` to the container so that it would act as the "containing block". In this minimal example, I think it's good enough...unless it's material to the solution! – lmat - Reinstate Monica Oct 26 '22 at 13:56
  • 1
    Add `position:relative;overflow:hidden` to `#svg_container`. This puts the `` in a different place in your example above, but it seems this is what you wanted to achieve anyway. `will-change: 'transform'` only has an effect on blending and compositing strategies, not on layout operations. – ccprog Oct 26 '22 at 14:02
  • By the way, I also tried setting an opaque background color to the surrounding divs and putting the svg "under" (zorder) the other divs. It didn't work: the SVG ignores the zorder and sits on top of the surrounding divs. – lmat - Reinstate Monica Oct 26 '22 at 14:13
  • @ccprog By the way, you are mistaken regarding "`will-change: 'transform'` only has an effect on ... not on layout operations.": https://jsfiddle.net/fcjk3r56/1/ – lmat - Reinstate Monica Oct 26 '22 at 19:27
  • 1
    I see. But you are exploiting a side effect. The [stated intention](https://w3c.github.io/csswg-drafts/css-will-change/#valdef-will-change-custom-ident) of the property is: "it indicates that the author expects to animate or change the property with the given name on the element **in the near future**." That is not what you are doing, so you should better use `position:relative`. Its main purpose is to produce a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), which is what you need. – ccprog Oct 26 '22 at 20:20

1 Answers1

0

As @ccprog mentions, add some properties to the #svg_container. It moves the SVG, so I changed the viewbox to demonstrate that the clipping is happening as desired.

#text {border:1px solid green;}
#svg_container {
  height: 50px;
  border:1px solid red;
  position:relative;
  overflow:hidden;
}
svg {
  position: absolute;
  top: -40px;
  left: -65px;
}
<div id="text">
  The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
  <svg viewbox="0 0 9 9" width="180px">
    <circle fill="darkblue" cx="3" cy="3" r="3" />
  </svg>
</div>
<div id="more-text">
  No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>
lmat - Reinstate Monica
  • 7,289
  • 6
  • 48
  • 62
  • I realized another way to do it would be to adjust the SVG `viewBox` property dynamically. If the drawing goes outside the `viewBox`, clipping happens automatically. – lmat - Reinstate Monica Oct 26 '22 at 15:18
  • 1
    Actually, no. Clipping is applied to the layout box of the `` element. If the aspect ratio of the element and the `viewBox` do not match (not in your case, as you implicitely have `height: auto`), it is possible that grafical content outside the viewBox remains visible. – ccprog Oct 26 '22 at 20:46