主页 / 问题 / 1105718
Accepted
DarkRou
Asked:2020-04-05 16:34:43 +0800 CST2020-04-05 16:34:43 +0800 CST

如何消除 SVG 对象的大小限制不被模糊？

  • 772

有一个模糊的 SVG 对象，但如果它足够模糊，就会阻止它进一步模糊，并切断它的一部分。

.circle{
    fill: #0adaf5;
}
<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="svg">
	<defs>
		<filter id="blurCircle">
			<feGaussianBlur id="blur" in="SourceGraphic" stdDeviation="50"/>
		</filter>
	</defs>
	<circle cx="250" cy="250" r="50" class="circle" filter="url(#blurCircle)">
		<animate
				id="blurAnimation"
				attributeName="r"
				values="50; 100; 50"
				dur="3s"
				repeatCount="indefinite"
				fill="remove"
		/>
	</circle>
</svg>

svg

1 个回答

  1. Best Answer

    也许这是这个问题的重复 - https://stackoverflow.com/questions/6555600/gaussian-blur-cutoff-at-edges 他们建议增加过滤器本身的大小（它的画布）。

    • 1

相关问题