blob: 716cbfdd7995920c2853b22755a312d13e295581 [file] [log] [blame]
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<title>Each green rect needs to be fully enclosed in the red frame rect</title>
<circle id="circle-rel" cx="50%" cy="50%" r="25%" fill="green"/>
<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1a-rel" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- Default effect subregion == default filter region -->
<feImage xlink:href="#circle-rel" />
</filter>
<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1b-rel" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- Default effect subregion != default filter region, as the length values below are resolved against objectBoundingBox as well -->
<feImage x="0%" y="0%" width="100%" height="100%" xlink:href="#circle-rel" />
</filter>
<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2a-rel" primitiveUnits="objectBoundingBox">
<!-- Default effect subregion == default filter region -->
<feImage xlink:href="#circle-rel" />
</filter>
<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2b-rel" primitiveUnits="objectBoundingBox">
<!-- Default effect subregion != default filter region, as the length values below are resolved against the 800x800 viewport! -->
<!-- So simply using x="0%" y="0%" width="100%" height="100%" is wrong, if you want to get the same effect as filter2a-rel.
We need following result values: x=-20, y=-20. width=240, height=240 (that is w/h=120%, x/y=-10%) -->
<feImage x="-10%" y="-10%" width="120%" height="120%" xlink:href="#circle-rel" />
</filter>
</defs>
<g>
<rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter1a-rel)"/>
<g transform="translate(150, 0)">
<rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter1b-rel)"/>
</g>
</g>
<g transform="translate(0, 150)">
<rect x="40" y="40" width="120" height="120" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter2a-rel)"/>
<g transform="translate(150, 0)">
<rect x="40" y="40" width="120" height="120" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter2b-rel)"/>
</g>
</g>
</svg>