gpt4 book ai didi

css - 剪裁在右边缘的 SVG 图稿

转载 作者:行者123 更新时间:2023-11-28 01:24:37 35 4
gpt4 key购买 nike

我是 SVG 的新手,总是让我感到困惑的部分是 SVG 的大小和边缘的剪裁。我在下面的复选框艺术中有一个 SVG 正方形,我试图将阴影添加到:

enter image description here

原来这样做的代码很简单;但右边缘被剪掉了。我尝试了各种宽度组合,但没有成功。我错过了什么?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<defs>
<filter id="blurFilter" y="-5" height="40">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
<feGaussianBlur in="offset2" result="blurredRect" stdDeviation="2" y="-"/>

<feMerge>
<feMergeNode in="blurredRect" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>

<g width="30" height="30" stroke="#00B140" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" >
<rect x="2" y="2" height="20" width="20" style="stroke: #3E53A4; fill: none; stroke-width=2px;filter: url(#blurFilter);" />
<path id="check" d="M21.542 11.271l-9.063 8.458-3.021-3.021"/>
</g>
</svg>

</body>
</html>

最佳答案

你需要在过滤器上设置宽度:

<filter id="blurFilter" y="-5" height="40" width="40">

fiddle

有关解释,您可以查看 filter feOffset definition ;

很快的原因是这个过滤器原语将输入图像相对于其当前位置在图像空间中偏移指定的向量


updated fiddle based on Holgerwill's comment

关于css - 剪裁在右边缘的 SVG 图稿,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32631569/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com