具有userSpaceOnUse和较大过滤区域的路径上的SVG过滤器,我的路径仍然被裁剪

我正在使用要在路径上使用的SVG过滤器。 由于我的路径可能是直线,因此我将userSpaceonUse用作过滤器单元。为了确保路径不会被剪切,请确保我的过滤器区域足够大。

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceonUse" id="dark" x="0" y="0" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0,0 .2 0 0 0,0 0 0.2 0 0,0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,1,-3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,56%)" filter="url(#dark)" fill="hsl(207,56%)" stroke-width="1" stroke-opacity="1"/>
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>

过滤器应用于三个路径:两个正方形和一个圆形。但是圆圈被剪掉了。

如果我使用objectBoundingBox,则圆圈将完全呈现。但这不是一个选择,因为我也想在没有尺寸的直线上使用滤镜。

如果我使用过滤器的xy,例如两者都使用-10,那么它也可以正常工作。

我的过滤区域有问题吗?我的理解是,它完全覆盖了SVG,因此任何使用过滤器的内容都不应被裁剪。 还是我不知道userSpaceonUse不支持的用例?

confessionscz 回答:具有userSpaceOnUse和较大过滤区域的路径上的SVG过滤器,我的路径仍然被裁剪

将平移更改为(0,0)而不是(100,100),以查看形状是如何脱离画布的。

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0,0 .2 0 0 0,0 0 0.2 0 0,0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(0,0)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,1,-3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,56%)" filter="url(#dark)" fill="hsl(207,56%)" stroke-width="1" stroke-opacity="1"/>
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>

翻译它并不会改变它最初在过滤器区域的上方和左侧绘制的情况。我们可以通过更改滤镜的x和y值来移动滤镜以解决此问题...

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="dark" x="-10" y="-10" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0,0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(100,100)" d="M3.989422804014327,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>

本文链接:https://www.f2er.com/2776417.html

大家都在问