Overflow: Visible on Svg

Overflow: Visible on SVG

I assume you mean inline <svg> elements in HTML, if so then this is just an implementation limitation. IE9+ allows overflow:visible on <svg> elements, but so far the other browsers don't AFAIK.

One possible workaround (which is really how it should be done in the first place IMHO) is to specify a viewBox which defines the coordinate system inside the svg. Then you draw stuff inside this coordinate system. If things get clipped (or in other words if the element(s) are outside the viewBox area), then just increase the viewBox width and/or height accordingly.

If you wonder about a good default for your particular viewBox, try [0 0 width height] (where width and height is the size of your svg you have at the moment), then just increase the height until the bottom tick is fully visible.

2014 update:
It's still a little bit inconsistent across browsers, but it's getting there. Firefox and IE support overflow:visible on inline svg elements, and Blink (Opera 23/Chrome 36) added support for it too, for the details see bugreport.

Overflow hidden on an absolute positioned SVG

When you want to use overflow: hidden with position: absolute, you have to know that the overflow is based on the first positioned ancestor;

In your example, you need a position: relative on the .container, and some negative offsets on your .bg. Here : https://jsfiddle.net/mopbq56s/

div {
  margin: 10vmin;
  position: relative;
  height: 625px;
  overflow: hidden;
}

svg {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 30vw;
    height: 30vw;
}

<div>
    <svg viewBox="0 0 100 100">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#614385;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:#516395;stop-opacity:1"/>
            </linearGradient>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
    </svg>
</div>

SVG with width 100% overflows its container

Svg is inline element, setting font-size: 0; to .menuquery will solve this

.menuquery {

    border: 1px solid #ccc;

    overflow: auto;

    box-sizing: border-box;

    font-size: 0;

}

.xainnersubformdefault {

  /* allows the svg to autosize */

  width: 100%;

  height: 100%;

}

.xadatabox {

  height: 100%;

  /* essential for jtable to scroll and not leak */

}

.datachart {

  width: 100%;

  height: 100%;

  /* position:relative; */

  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */

}

svg {

  width: 100%;

  height: 100%;

  border: 1px solid green;

  box-sizing: border-box;

}

<div class="menuquery" style="width:300px;height:200px">

  <div class="xa xafield xadatabox">

    <div class="xainnersubformdefault">

      <div class="datachart">

        <svg></svg>

      </div>

    </div>

  </div>

</div>

How to achieve overflow hidden with svg animation?

Updated

Like any animation where you are changing the position of something you can use transforms.

The key here is making the squiggly path wider than the svg viewbox, and setting overflow:hidden on svg (which is supported).

Since your illustration is tiny I had to make the svg viewbox tiny as well, only 15px wide, so that the path could overlap the svg container.

<svg version="1.1" x="0px" y="0px" width="15px" height="3.6px" viewBox="0 0 15 3.6">
   <path class="white-path animate" d="M1,1c1.6,0,1.6,1.6,3.3,1.6S5.9,1,7.6,1c1.6,0,1.6,1.6,3.3,1.6S12.5,1,14.2,1s1.6,1.6,3.3,1.6 c1.6,0,1.6-1.6,3.3-1.6"/>
</svg>

css:

svg {
  overflow:hidden;
}
.white-path {
  fill:none;
  stroke:#FFFFFF;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
 }
 @keyframes squiggle {
   from {
     transform: translateX(-7px)
   }
   to {
     transform: translateX(0px)
   }
 }
 .animate {
   animation: squiggle 1s linear infinite;
 }

I used a negative x translation, and through trial and error picked the right distance so the looping was seamless.

Demo:
https://jsfiddle.net/bje5rxzs/6/

Allow SVG graphics to overflow outside the containing svg element

It's a bug in Firefox.

WebKit implements overflow: visible correctly for SVG elements, as does IE for VML elements.

---

Related Topics