Question

我对SVG很新，而且总是让我困惑的部分是SVG的大小和边缘处的剪裁。我在下面的复选框艺术中有一个SVG广场，我试图添加一个drophadow：

原来这样做的代码很简单;但右边缘被剪掉了。我试过宽度等的各种组合，没有运气。我错过了什么？

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

Answer 1

您需要在过滤器上设置宽度：

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

fiddle

要获得解释，您可以查看filter feOffset definition;

原因很简单，原因是此滤镜原语相对于其在图像空间中的当前位置偏移了指定的矢量。

updated fiddle based on Holgerwill's comment

SVG艺术品剪裁在右边缘

1 个答案:

fiddle