blob: 47116d36e70f947b30f5cada415b14e9b7759b6d [file] [log] [blame]
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- ========================================================================= -->
<!-- This example validates the handling of viewBox and preserveAspectRatio -->
<!-- for <symbol> elements with overflow set to visible. <symbol> elements -->
<!-- establish a new viewport and therefore, the overflow property applies. -->
<!-- -->
<!-- @author vhardy@apache.org -->
<!-- @version $Id$ -->
<!-- ========================================================================= -->
<?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="450" height="500" viewBox="0 0 450 500">
<title>&lt;symbol&gt; and viewBox &amp; preserveAspectRatio</title>
<style type="text/css"><![CDATA[
.label { text-anchor: middle; }
.oddRow { fill:white; stroke:black; }
.evenRow { fill:#eeeeee; stroke:black; }
]]></style>
<g id="content">
<text class="title" x="50%" y="30">viewBox &amp; preserveAspectRatio
<title>viewBox &amp; preserveAspectRatio on &lt;symbol&gt;</title>
<desc>This test validates the processing of viewBox and preserveAspectRatio
on &lt;symbol&gt; elements in conjunction with the overflow property.
In this test, there should be no clipping around the viewBox boundaries
and the smilley&apos;s ears and feet should show.</desc></text>
<text class="title" x="50%" y="50">on &lt;symbol&gt;, overflow="visible"</text>
<g id="table" class="label" transform="translate(80, 60)">
<rect width="110" height="20" class="oddRow" />
<text x="55" y="15">meet</text>
<rect width="110" height="20" class="oddRow" transform="translate(110,0)"/>
<text x="55" y="15" transform="translate(110, 0)">slice</text>
<rect width="110" height="20" class="oddRow" transform="translate(220,0)"/>
<text x="55" y="15" transform="translate(220, 0)">unspecified</text>
<g id="yMXX">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMin</text>
<g transform="translate(0,40)">
<rect x="-20" y="20" width="20" height="40" class="evenRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMid</text>
</g>
<g transform="translate(0,80)">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMax</text>
</g>
</g>
<g transform="translate(0,120)">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMin</text>
<g transform="translate(0,40)">
<rect x="-20" y="20" width="20" height="40" class="evenRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMid</text>
</g>
<g transform="translate(0,80)">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMax</text>
</g>
</g>
<g transform="translate(0,240)">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMin</text>
<g transform="translate(0,40)">
<rect x="-20" y="20" width="20" height="40" class="evenRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMid</text>
</g>
<g transform="translate(0,80)">
<rect x="-20" y="20" width="20" height="40" class="oddRow" />
<text x="-5" y="40" transform="rotate(-90,-5,40)">yMax</text>
</g>
</g>
<rect x="-40" y="20" width="20" height="120" class="evenRow" />
<text x="-25" y="80" transform="rotate(-90,-25,80)">xMin</text>
<g transform="translate(0,120)">
<rect x="-40" y="20" width="20" height="120" class="oddRow" />
<text x="-25" y="80" transform="rotate(-90,-25,80)">xMid</text>
</g>
<g transform="translate(0,240)">
<rect x="-40" y="20" width="20" height="120" class="evenRow" />
<text x="-25" y="80" transform="rotate(-90,-25,80)">xMax</text>
</g>
<defs>
<g id="row">
<rect width="110" height="40" transform="translate(0 ,20)"/>
<rect width="110" height="40" transform="translate(110,20)"/>
<rect width="110" height="40" transform="translate(220,20)"/>
</g>
</defs>
<g id="evenRowBlock">
<use xlink:href="#row" class="evenRow" transform="translate(0,0)"/>
<use xlink:href="#row" class="oddRow" transform="translate(0,40)"/>
<use xlink:href="#row" class="evenRow" transform="translate(0,80)"/>
</g>
<g id="oddRowBlock" transform="translate(0,120)">
<use xlink:href="#row" class="oddRow" transform="translate(0,0)"/>
<use xlink:href="#row" class="evenRow" transform="translate(0,40)"/>
<use xlink:href="#row" class="oddRow" transform="translate(0,80)"/>
</g>
<use xlink:href="#evenRowBlock" transform="translate(0,240)"/>
<rect x="-40" y="380" width="40" height="40" fill="white" stroke="black" />
<text x="-15" y="400" transform="rotate(-90, -15, 400)">none</text>
<use xlink:href="#row" class="oddRow" transform="translate(0,360)" />
<line x1="55" y1="20" x2="55" y2="420" stroke="black" />
<line x1="165" y1="20" x2="165" y2="420" stroke="black" />
<line x1="275" y1="20" x2="275" y2="420" stroke="black" />
</g>
<g id="testCases" transform="translate(80, 80)">
<defs>
<rect id="hViewBox" x="12.5" y="7.5" width="30" height="25" stroke="red" fill="none"/>
<rect id="vViewBox" x="72.5" y="7.5" width="20" height="25" stroke="red" fill="none"/>
<g id="smilley">
<g transform="translate(-15,-15)" >
<circle cx="10" cy="25" r="4" fill="crimson" />
<circle cx="20" cy="25" r="4" fill="crimson" />
<circle cx="7" cy="15" r="4" fill="crimson" />
<circle cx="23" cy="15" r="4" fill="crimson" />
<circle cx="15" cy="15" r="10" fill="yellow"/>
<circle cx="12" cy="12" r="1.5" fill="black"/>
<circle cx="17" cy="12" r="1.5" fill="black"/>
<path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="1" fill="none"/>
</g>
</g>
</defs>
<!-- xMinYXXX XXX -->
<g>
<!-- ... YMin XXX -->
<g>
<g>
<symbol id="xMinYMinMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMin meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMinMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMinMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMinYMinSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMin slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMinSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMinSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMinYMinUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMin">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMinUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMinUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMid XXX -->
<g transform="translate(0, 40)">
<g>
<symbol id="xMinYMidMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMid meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMidMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMidMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMinYMidSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMid slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMidSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMidSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMinYMidUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMid">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMidUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMidUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMax XXX -->
<g transform="translate(0, 80)">
<g>
<symbol id="xMinYMaxMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMax meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMaxMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMaxMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMinYMaxSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMax slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMaxSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMaxSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMinYMaxUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMinYMax">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMinYMaxUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMinYMaxUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
</g>
<!-- xMidYXXX XXX -->
<g transform="translate(0, 120)">
<!-- ... YMin XXX -->
<g>
<g>
<symbol id="xMidYMinMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMin meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMinMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMinMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMidYMinSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMin slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMinSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMinSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMidYMinUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMin">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMinUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMinUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMid XXX -->
<g transform="translate(0, 40)">
<g>
<symbol id="xMidYMidMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMidMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMidMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMidYMidSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMid slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMidSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMidSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMidYMidUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMid">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMidUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMidUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMax XXX -->
<g transform="translate(0, 80)">
<g>
<symbol id="xMidYMaxMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMax meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMaxMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMaxMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMidYMaxSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMax slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMaxSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMaxSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMidYMaxUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMidYMax">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMidYMaxUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMidYMaxUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
</g>
<!-- xMaxYXXX XXX -->
<g transform="translate(0, 240)">
<!-- ... YMin XXX -->
<g>
<g>
<symbol id="xMaxYMinMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMin meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMinMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMinMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMaxYMinSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMin slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMinSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMinSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMaxYMinUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMin">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMinUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMinUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMid XXX -->
<g transform="translate(0, 40)">
<g>
<symbol id="xMaxYMidMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMid meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMidMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMidMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMaxYMidSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMid slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMidSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMidSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMaxYMidUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMid">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMidUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMidUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
<!-- ... YMax XXX -->
<g transform="translate(0, 80)">
<g>
<symbol id="xMaxYMaxMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMaxMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMaxMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="xMaxYMaxSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMax slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMaxSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMaxSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="xMaxYMaxUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="xMaxYMax">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#xMaxYMaxUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#xMaxYMaxUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
</g>
<!-- none XXX -->
<g transform="translate(0,360)">
<g>
<g>
<symbol id="noneMeet" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="none meet">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#noneMeet" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#noneMeet" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(110, 0)">
<symbol id="noneSlice" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="none slice">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#noneSlice" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#noneSlice" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
<g transform="translate(220, 0)">
<symbol id="noneUnspecified" overflow="visible" viewBox="-10 -10 20 20" preserveAspectRatio="none">
<use xlink:href="#smilley" />
</symbol>
<use xlink:href="#noneUnspecified" x="12.5" y="7.5" width="30" height="25" />
<use xlink:href="#hViewBox" />
<use xlink:href="#noneUnspecified" x="72.5" y="7.5" width="20" height="25" />
<use xlink:href="#vViewBox" />
</g>
</g>
</g>
</g>
</g><!-- "content" -->
<!-- ============================================================= -->
<!-- Batik sample mark -->
<!-- ============================================================= -->
<use xlink:href="../../../batikLogo.svg#Batik_Tag_Box" />
</svg>