Svg 元素在容器外时隐藏答案

【问题标题】：Svg element hiding if is out of the containerSvg 元素在容器外时隐藏
【发布时间】：2019-09-23 16:55:48
【问题描述】：

我想将svg element 移到container 之外，但它正在隐藏。我启用了overflow: visible 仍然无法解决问题。

我用 figma 创建了 svg。 Clip content 已禁用

这里有code 和photo，以便更好地查看问题。

【问题讨论】：

尝试x="-100" width="200%" 过滤器#filter0_f
嗯，所以我只需要在figma中增加框架的width和height？

标签： javascript html css animation svg

【解决方案1】：

此 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>

【讨论】：

【解决方案2】：

我更新了svg元素，你可以在gist中查看，我只是在figma中增加了frame size。

【讨论】：