Question

为什么此SVG中的网格不会填满整个256x256空间？无论我改变它的大小，大约15％的网格被切断，在我看来，在我的代码中，我认为这是任意的。

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

Answer 1

SVG规范默认过滤器为10% larger than the filtered object by default。

如果未指定“x”或“y”，则效果就好像指定了-10％的值。

如果未指定'width'或'height'，效果就好像指定了120％的值。

我想这就是为了阻止许多问题，“为什么我的基于高斯模糊的阴影滤镜会被切断？”

Answer 2

所以，看起来我需要做的就是修复它是添加一个x =＆＃34; 0＆＃34;和y =＆＃34; 0＆＃34;过滤器。我不明白为什么它是必要的，因为它没有意义，它会默认为＆＃34; -15％＆＃34;。

＆＃13;

<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" x="0" y="0"  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>

＆＃13;

为什么这个SVG滤镜会意外地从形状中剪掉约15％

2 个答案: