blob: 621c70f38caf30d242ce876ca97dfca0c522f83d [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"/>
<circle id="circle-abs" cx="100" cy="100" r="50" 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" x="0" y="0" width="1" height="1">
<!-- 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" x="0" y="0" width="1" height="1">
<!-- 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 filter1a-rel.
We need following result values: x=0, y=0. width=200, height=200 (that is 25% in percentages!) -->
<feImage x="0%" y="0%" width="25%" height="25%" 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">
<!-- 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">
<!-- 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=30%, x/y=-2.5%) -->
<feImage x="-2.5%" y="-2.5%" width="30%" height="30%" 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="filter1a-abs" x="0" y="0" width="1" height="1">
<!-- Default effect subregion == default filter region -->
<feImage xlink:href="#circle-abs" />
</filter>
<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1b-abs" x="0" y="0" width="1" height="1">
<!-- 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 filter1a-abs.
We need following result values: x=0, y=0. width=200, height=200 (that is 25% in percentages!) -->
<feImage x="0%" y="0%" width="25%" height="25%" xlink:href="#circle-abs" />
</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-abs">
<!-- Default effect subregion == default filter region -->
<feImage xlink:href="#circle-abs" />
</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-abs">
<!-- 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-abs.
We need following result values: x=-20, y=-20. width=240, height=240 (that is w/h=30%, x/y=-2.5%) -->
<feImage x="-2.5%" y="-2.5%" width="30%" height="30%" xlink:href="#circle-abs" />
</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(#filter1a-abs)"/>
</g>
<g transform="translate(300, 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 transform="translate(450, 0)">
<rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter1b-abs)"/>
</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>
<g transform="translate(0, 300)">
<rect x="30" y="30" width="100" height="100" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter2a-abs)"/>
<g transform="translate(150, 0)">
<rect x="30" y="30" width="100" height="100" fill="none" stroke="red"/>
<rect width="200" height="200" fill="red" filter="url(#filter2b-abs)"/>
</g>
</g>
</svg>