为什么此SVG过滤器意外地从形状上剪下约15％ [英] Why does this SVG filter unexpectedly clip off ~15% from shape

问题描述

为什么此SVG中的网格无法填充整个256x256空间?无论我将其更改为什么大小，大约都会割掉15％的网格，在我的代码上下文中，这似乎是任意的.

Why does the grid in this SVG not fill the entire 256x256 space? No matter what size I change it to, about 15% of the grid is cut off, which appears to me to be arbitrary in the context of my code.

<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="grid" width="18.75" height="18.75" patternUnits="userSpaceOnUse">
            <path d="M 18.75 0 L 0 0 0 18.75" fill="none" stroke="black" stroke-width="1"/>
        </pattern>
        <rect id="gridRect"  width="100%" height="100%" fill="url(#grid)" />  
        <filter id="gridify"  width="100%" height="100%" filterUnits = "userSpaceOnUse">
            <feImage result="sourceTwo" xlink:href="#gridRect" />
            <feComposite in="SourceGraphic" in2="sourceTwo" operator="in"/>
        </filter>
    </defs>
    <g filter="url(#gridify)" >
        <rect width="100%" height="100%" fill="url(#linGradient)" />
    </g>
    <rect width="100%" height="100%" fill="none" stroke="black" stroke-width="1"/>
</svg>

推荐答案

SVG规范默认将过滤器设置为默认情况下比已过滤的对象大10％.

The SVG specification defaults filters to being 10% larger than the filtered object by default.

如果未指定"x"或"y"，则效果就像指定了-10％的值.

If ‘x’ or ‘y’ is not specified, the effect is as if a value of -10% were specified.

如果未指定宽度"或高度"，则效果就像指定了120％的值.

If ‘width’ or ‘height’ is not specified, the effect is as if a value of 120% were specified.

我想这将停止很多问题，例如为什么我的基于高斯模糊的下拉阴影滤镜会被切除?"

I imagine that's to stop lots of questions along the lines of "why is my Gaussian blur based drop-shadow filter cut off?"

这篇关于为什么此SVG过滤器意外地从形状上剪下约15％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！