CODEWITHSUNDEEP
svgsvg-filters
Rick Velde
Rick Velde

Reputation: 591

Why does this SVG filter unexpectedly clip off ~15% from shape

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>

Upvotes: 0

Views: 258

Answers (2)

Robert Longson
Robert Longson

Reputation: 124059

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

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

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

Upvotes: 3

Rick Velde
Rick Velde

Reputation: 591

So, looks like all I needed to do to fix it was add an x="0" and a y="0" to the filter. I don't understand why it is necessary though, as it does not make sense that it would default to "-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" 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>

Upvotes: 0

Related Questions