ZVON > References > Zvon Example Repository
Example repository: index | categories | search

All > SVG > Coordinates > coords-unitsProc-BE-05


File: coords-unitsProc-BE-05
Author: Vincent Hardy
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
circlecx | cy | id | r | style |
descid |
gid | style | transform |
linestyle | x1 | x2 | y1 | y2 |
linearGradientgradientUnits | id | x1 | x2 | y1 | y2 |
pathd | style |
patternheight | id | patternContentUnits | patternUnits | width | x | y |
radialGradientcx | cy | fx | fy | gradientUnits | id | r |
rectheight | id | style | transform | width | x | y |
stopoffset | style |
svgheight | id | width |
textstyle | x | y |
titleid |

Source

<svg id="svg-root" width="450" height="450" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
     <title id="test-title">coords-unitsProc-BE-05</title>
     <desc id="test-desc">This test validates the processing rules for converting coordinates and length defined in fractions of the current object's bounding box to user space coordinates and length. Note that this test assumes that linear and radial gradients, as well as patterns are implemented.</desc>
     <g id="test-body-content">
          <linearGradient id="linearBoundingBoxPercentage" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </linearGradient>
          <linearGradient id="linearBoundingBoxFraction" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </linearGradient>
          <linearGradient id="linearUserSpace" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="0">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </linearGradient>
          <text x="30" y="60">Bounding box relative coordinates (percentage and fraction)</text>
          <g transform="translate(30, 70)">
               <rect x="0" y="0" width="50" height="20" style="fill:url(#linearBoundingBoxPercentage);"/>
               <rect x="0" y="0" width="50" height="20" transform="translate(0, 20)" style="fill:url(#linearBoundingBoxFraction);"/>
               <rect x="0" y="0" width="50" height="20" transform="translate(0, 40)" style="fill:url(#linearUserSpace);"/>
               <line x1="0" y1="20" x2="50" y2="20" style="stroke:#cccccc;stroke-width:1;"/>
               <line x1="0" y1="40" x2="50" y2="40" style="stroke:#cccccc;stroke-width:1;"/>
               <text x="60" y="15">Percentage</text>
               <text x="60" y="35">Fraction</text>
               <text x="60" y="55">User Space</text>
          </g>
          <radialGradient id="radialBoundingBoxPercentage" gradientUnits="objectBoundingBox" cx="25%" cy="25%" r="25%" fx="25%" fy="25%">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </radialGradient>
          <radialGradient id="radialBoundingBoxFraction" gradientUnits="objectBoundingBox" cx="0.25" cy="0.25" r="0.25" fx="0.25" fy="0.25">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </radialGradient>
          <radialGradient id="radialUserSpace" gradientUnits="userSpaceOnUse" cx="15" cy="15" r="15" fx="15" fy="15">
               <stop style="stop-color:red;" offset="0"/>
               <stop style="stop-color:blue;" offset="1"/>
          </radialGradient>
          <text x="30" y="160">Bounding box relative length (percentage and fraction)</text>
          <g transform="translate(30, 170)">
               <rect x="0" y="0" width="60" height="60" style="fill:url(#radialBoundingBoxPercentage);"/>
               <rect x="0" y="0" width="60" height="60" transform="translate(61, 0)" style="fill:url(#radialBoundingBoxFraction);"/>
               <rect x="0" y="0" width="60" height="60" transform="translate(122, 0)" style="fill:url(#radialUserSpace);"/>
               <text x="0" y="70">Percent.</text>
               <text x="61" y="70">Fraction</text>
               <text x="122" y="70">User Space</text>
          </g>
          <pattern id="patternBoundingBoxPercentage" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="25%" y="25%" width="50%" height="50%">
               <circle cx="0.50" cy="0.50" r="0.25" style="fill:red;"/>
               <rect x="0.4" y="0.4" width=".2" height=".2" style="fill:blue;"/>
          </pattern>
          <pattern id="patternBoundingBoxFraction" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="0.25" y="0.25" width="0.50" height="0.50">
               <circle cx="0.50" cy="0.50" r="0.25" style="fill:red;"/>
               <rect x="0.4" y="0.4" width=".2" height=".2" style="fill:blue;"/>
          </pattern>
          <pattern id="patternUserSpace" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="12.5" y="7.5" width="25" height="15">
               <circle id="patternContent" cx="25" cy="15" r="10" style="fill:red;"/>
               <rect x="20" y="12" width="10" height="6" style="fill:blue;"/>
          </pattern>
          <text x="30" y="270">Bounding box relative width/height (percentage and fraction)</text>
          <g transform="translate(30, 280)">
               <rect x="0" y="0" width="50" height="30" style="fill:url(#patternBoundingBoxPercentage);stroke:black;"/>
               <rect x="0" y="0" width="50" height="30" transform="translate(0, 35)" style="fill:url(#patternBoundingBoxFraction);stroke:black;"/>
               <rect x="0" y="0" width="50" height="30" transform="translate(0, 70)" style="fill:url(#patternUserSpace);stroke:black;"/>
               <text x="60" y="20">Percentage</text>
               <text x="60" y="55">Fraction</text>
               <text x="60" y="90">User Space</text>
          </g>
          <rect x="1" y="1" width="448" height="448" style="fill:none;stroke:#000000;"/>
     </g>
     <g id="test-legend" style="fill:black;font-family:Helvetica;font-size:10;">
          <rect x="10" y="390" width="275" height="50" style="fill:none;stroke:#000000;"/>
          <path style="fill:none;stroke:#000000;" d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
          <text x="25" y="401">Scalable Vector Graphics (SVG) Conformance Suite</text>
          <a xlink:href="copyright-documents-19990405.html">
               <text x="12" y="437" style="fill:blue;">Copyright 2000 W3C. All Rights Reserved.</text>
          </a>
          <text style="font-size:12;" x="35" y="420">coords-unitsProc-BE-05</text>
          <text style="font-size:10;" x="210" y="417">$Revision: 1.1 $</text>
          <text style="font-size:10;" x="210" y="435">Release 2.0</text>
          <rect id="test-frame" x="1" y="1" width="448" height="448" style="fill:none;stroke:#000000;"/>
     </g>
</svg>



Sponsored links: Domain Names, VoIP Internettelefonie, DSL, SDSL, ADSL, UNLIMITED Web Hosting by HostDepartment, conference call service, answering service