coords-units-01-b-isvalid.html (9651B)
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <title>coords-units-01-b-manual.svg</title> 5 <meta charset='utf-8'> 6 </head> 7 <body> 8 <h1>Source SVG: coords-units-01-b-manual.svg</h1> 9 <svg version="1.1" baseProfile="basic" id="svg-root" 10 width="100%" height="100%" viewBox="0 0 480 360" 11 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12 <!--======================================================================--> 13 <!--= SVG 1.1 2nd Edition Test Case =--> 14 <!--======================================================================--> 15 <!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =--> 16 <!--= Institute of Technology, European Research Consortium for =--> 17 <!--= Informatics and Mathematics (ERCIM), Keio University). =--> 18 <!--= All Rights Reserved. =--> 19 <!--= See http://www.w3.org/Consortium/Legal/. =--> 20 <!--======================================================================--> 21 22 <title id="test-title">$RCSfile: coords-units-01-b.svg,v $</title> 23 <defs> 24 <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F"> 25 <font-face-src> 26 <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/> 27 </font-face-src> 28 </font-face> 29 </defs> 30 <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> 31 <g font-size="14"> 32 <!-- ==================================================================== --> 33 <!-- The following gradients will be used to fill a rectangle with the --> 34 <!-- following geometry in User space: x=0, y=0, width=50 height=20 --> 35 <!-- The gradient vector, in linearBoundingBox, is defined as: (0%, 0%) --> 36 <!-- to (100%, 0%). --> 37 <!-- The gradient vector, in linearBoundingBoxFraction, is defined as: --> 38 <!-- (0, 0) to (1, 0), which is equivalent. --> 39 <!-- According to the spec, for our rectangle, this corresponds to the --> 40 <!-- following user space coordinates: --> 41 <!-- (0%, 0%) becomes (0, 0) and (100%, 0%) becomes (20, 0) --> 42 <!-- These values are used to define the linearUserSpace gradient. --> 43 <!-- If the test succeeds, all the gradient should fill the rectangles --> 44 <!-- the same way --> 45 <!-- ==================================================================== --> 46 <linearGradient id="linearBoundingBoxPercentage" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"> 47 <stop stop-color="fuchsia" offset="0"/> 48 <stop stop-color="blue" offset="1"/> 49 </linearGradient> 50 <linearGradient id="linearBoundingBoxFraction" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> 51 <stop stop-color="fuchsia" offset="0"/> 52 <stop stop-color="blue" offset="1"/> 53 </linearGradient> 54 <linearGradient id="linearUserSpace" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="0"> 55 <stop stop-color="fuchsia" offset="0"/> 56 <stop stop-color="blue" offset="1"/> 57 </linearGradient> 58 <!-- Draw Text Comment --> 59 <text x="30" y="30">Bounding box relative coordinates (percentage and fraction)</text> 60 <g transform="translate(30, 40)"> 61 <rect x="0" y="0" width="50" height="20" fill="url(#linearBoundingBoxPercentage)"/> 62 <rect x="0" y="0" width="50" height="20" transform="translate(0, 20)" fill="url(#linearBoundingBoxFraction)"/> 63 <rect x="0" y="0" width="50" height="20" transform="translate(0, 40)" fill="url(#linearUserSpace)"/> 64 <line x1="0" y1="20" x2="50" y2="20" stroke="#cccccc" stroke-width="1"/> 65 <line x1="0" y1="40" x2="50" y2="40" stroke="#cccccc" stroke-width="1"/> 66 <text x="60" y="15">Percentage</text> 67 <text x="60" y="35">Fraction</text> 68 <text x="60" y="55">User Space</text> 69 </g> 70 <!-- ==================================================================== --> 71 <!-- The following gradients will be used to fill a rectangle with the --> 72 <!-- following geometry in User space: x=0, y=0, width=60 height=60 --> 73 <!-- The radial gradient outmost circle, in radialBoundingBox, is defined --> 74 <!-- as: cx=25% cy=25% r=25% --> 75 <!-- The radial gradient outmost circle, in radialBoundingBoxFraction, is --> 76 <!-- defined as: cx=0.25 cy=0.25 and r=0.25 --> 77 <!-- These two definition, for our rectangle, should be identical to the --> 78 <!-- following radial gradient outmost circle, in radialUserSpace: --> 79 <!-- cx=15 cy=15 r=15 --> 80 <!-- ==================================================================== --> 81 <radialGradient id="radialBoundingBoxPercentage" gradientUnits="objectBoundingBox" cx="25%" cy="25%" r="25%" fx="25%" fy="25%"> 82 <stop stop-color="fuchsia" offset="0"/> 83 <stop stop-color="blue" offset="1"/> 84 </radialGradient> 85 <radialGradient id="radialBoundingBoxFraction" gradientUnits="objectBoundingBox" cx="0.25" cy="0.25" r="0.25" fx="0.25" fy="0.25"> 86 <stop stop-color="fuchsia" offset="0"/> 87 <stop stop-color="blue" offset="1"/> 88 </radialGradient> 89 <radialGradient id="radialUserSpace" gradientUnits="userSpaceOnUse" cx="15" cy="15" r="15" fx="15" fy="15"> 90 <stop stop-color="fuchsia" offset="0"/> 91 <stop stop-color="blue" offset="1"/> 92 </radialGradient> 93 <!-- Draw Text Comment --> 94 <text x="30" y="130">Bounding box relative length (percentage and fraction)</text> 95 <g transform="translate(30, 140)"> 96 <rect x="0" y="0" width="60" height="60" fill="url(#radialBoundingBoxPercentage)"/> 97 <rect x="0" y="0" width="60" height="60" transform="translate(61, 0)" fill="url(#radialBoundingBoxFraction)"/> 98 <rect x="0" y="0" width="60" height="60" transform="translate(122, 0)" fill="url(#radialUserSpace)"/> 99 <text x="0" y="73">Percent.</text> 100 <text x="61" y="73">Fraction</text> 101 <text x="122" y="73">User Space</text> 102 </g> 103 <!-- ==================================================================== --> 104 <!-- The following patterns will be used to fill a rectangle, with the --> 105 <!-- following geometry in User space: x=0, y=0, width=50 height=30 --> 106 <!-- The pattern tile, in patterBoundingBoxPercentage, is defined as: --> 107 <!-- x=25% y=25% width=50% height=50% --> 108 <!-- The pattern tile, in patternBoundingBoxFraction, is defined as: --> 109 <!-- x=0.25 y=0.25 width=0.50 height=0.50 --> 110 <!-- For our test rectangle, both correspond to the following User space --> 111 <!-- coordinates: x=12.5 y=7.5 width=25 height=15 --> 112 <!-- These coordinates are use to define the patternUserSpace tile --> 113 <!-- ==================================================================== --> 114 <pattern id="patternBoundingBoxPercentage" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="25%" y="25%" width="50%" height="50%"> 115 <circle cx="0.50" cy="0.50" r="0.25" fill="fuchsia"/> 116 <rect x="0.4" y="0.4" width=".2" height=".2" fill="blue"/> 117 </pattern> 118 <pattern id="patternBoundingBoxFraction" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="0.25" y="0.25" width="0.50" height="0.50"> 119 <circle cx="0.50" cy="0.50" r="0.25" fill="fuchsia"/> 120 <rect x="0.4" y="0.4" width=".2" height=".2" fill="blue"/> 121 </pattern> 122 <pattern id="patternUserSpace" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="12.5" y="7.5" width="25" height="15"> 123 <circle id="patternContent" cx="25" cy="15" r="10" fill="fuchsia"/> 124 <rect x="20" y="12" width="10" height="6" fill="blue"/> 125 </pattern> 126 <!-- Draw Text Comment --> 127 <text x="30" y="240">Bounding box relative width/height (percentage and fraction)</text> 128 <g transform="translate(30, 250)"> 129 <rect x="0" y="0" width="50" height="30" fill="url(#patternBoundingBoxPercentage)" stroke="black"/> 130 <rect x="0" y="0" width="50" height="30" transform="translate(150, 0)" fill="url(#patternBoundingBoxFraction)" stroke="black"/> 131 <rect x="0" y="0" width="50" height="30" transform="translate(300, 0)" fill="url(#patternUserSpace)" stroke="black"/> 132 <text x="60" y="20">Percentage</text> 133 <text x="210" y="20">Fraction</text> 134 <text x="360" y="20">User Space</text> 135 </g> 136 </g> 137 </g> 138 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 139 <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</text> 140 </g> 141 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> 142 <!-- comment out this watermark once the test is approved --> 143 <!--<g id="draft-watermark"> 144 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> 145 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 146 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> 147 </g>--> 148 </svg> 149 </body> 150 </html>