Элемент svg скрывается, если находится вне контейнера

Question

Я хочу переместить svg element за пределы его container, но скрывается.Я включил overflow: visible, но до сих пор не могу понять проблему.

Я создал svg с figma.Clip content отключено

Здесь у вас есть код & фотография , чтобы лучше увидеть проблему.

Answer 1

Я обновил элемент svg, вы можете проверить его в gist , я только увеличил frame size в figma.

Answer 2

Этот код SVG может быть полезен ... Откройте этот фрагмент в полном объеме ..

/** Animation Boxes (Moving on cursor move) **/
.showcase-animation-container {
	position: absolute;
	right: 350px;
	width: 500px;
	height: 500px;

	svg {
		position: absolute;
		top: 0;
		left: 0;
		overflow: visible !important;
		width: 100%;
		height: 100%;
	}
}

.left-triangle { transform-origin: center center }

.left-triangle {
	transform: translate(-180px, -70px) rotate(-50deg);
	fill: red;
}

<div class="showcase-animation-container">
 <svg width="736" height="589" viewBox="-80 0 556 589" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_f)" style="
   /* margin-left: 180px; */
   ">
   <path class="left-triangle" d="M12.6269 323.5L130 82.9806L247.373 323.5H12.6269Z" stroke="black" stroke-width="7"></path>
   <path d="M389.373 265.5L272 506.019L154.627 265.5H389.373Z" stroke="black" stroke-width="7"></path>
   <path d="M308.627 323.5L426 82.9806L543.373 323.5H308.627Z" stroke="black" stroke-width="7"></path>
  </g>
  <defs>
   <filter id="filter0_f" x="-180" y="-7" width="736" height="589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
    <feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur"></feGaussianBlur>
   </filter>
  </defs>
 </svg>
</div>