javascript - Svg 元素在容器外时隐藏

Question

我想将一个 svg 元素 移到它的 container 之外，但它是隐藏的。我启用了overflow: visible还是没弄清楚问题。

我用 figma 创建了 svg。 剪辑内容被禁用

这里有 code &一个photo以便更好地看到问题。

Answer 1

此 SVG 代码可能会有帮助...以完整 View 打开此代码段..

/** 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>