paths-dom-02-f-isvalid.html (8231B)
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <title>paths-dom-02-f-manual.svg</title> 5 <meta charset='utf-8'> 6 </head> 7 <body> 8 <h1>Source SVG: paths-dom-02-f-manual.svg</h1> 9 <svg version="1.1" baseProfile="full" onload="CreatePath();setTimeout('AnimatePath();', 500);" 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: paths-dom-02-f.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 <script><![CDATA[ 32 var offset_angle = 90; 33 var current_shift = 0; 34 var shift_inc = 1; 35 var THRESHOLD = 60; 36 var segments_added = 0; 37 var seg_diff = 1; 38 var adjust_count = 0; 39 var anim_count = 0; 40 var adjust_count_max = 8; 41 var anim_count_max = 10; 42 var stopped = false; 43 44 function DegToRad(degs) 45 { 46 return (degs * Math.PI) / 180; 47 } 48 49 function CreatePath() 50 { 51 var pathelm = document.getElementById("mypath"); 52 var pathlist = pathelm.pathSegList; 53 54 var move = pathelm.createSVGPathSegMovetoAbs(240 + 30 * Math.cos(DegToRad(offset_angle - 30)), 55 180 + 30 * Math.sin(DegToRad(offset_angle - 30))); 56 pathlist.appendItem(move); 57 58 var angle = offset_angle; 59 for (var i = 0; i < 6; i++) 60 { 61 var x, y, xcp, ycp; 62 63 x = 240 + 30 * Math.cos(DegToRad(angle + 30)); 64 y = 180 + 30 * Math.sin(DegToRad(angle + 30)); 65 66 xcp = 240 + 120 * Math.cos(DegToRad(angle)); 67 ycp = 180 + 120 * Math.sin(DegToRad(angle)); 68 69 var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y, 70 xcp, ycp, 71 xcp, ycp); 72 73 pathlist.appendItem(curve); 74 75 angle += 60; 76 } 77 78 pathlist.appendItem(pathelm.createSVGPathSegClosePath()); 79 setTimeout('AdjustPath()', 500); 80 } 81 82 function AddSegment() 83 { 84 var pathelm = document.getElementById("mypath"); 85 var pathlist = pathelm.pathSegList; 86 87 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close 88 var angle = offset_angle; 89 var inc_angle = 360/(segments+1); 90 var shift_v_x, shift_v_y, xcp, ycp; 91 92 var move = pathlist.getItem(0); 93 move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2)); 94 move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2)); 95 96 for (var i = 0; i < segments; i++) 97 { 98 var curve = pathlist.getItem(1+i); 99 100 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90)); 101 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90)); 102 103 xcp = 240 + 120 * Math.cos(DegToRad(angle)); 104 ycp = 180 + 120 * Math.sin(DegToRad(angle)); 105 106 curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2)); 107 curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2)); 108 109 curve.x1 = xcp - shift_v_x; 110 curve.y1 = ycp - shift_v_y; 111 112 curve.x2 = xcp + shift_v_x; 113 curve.y2 = ycp + shift_v_y; 114 115 angle += inc_angle; 116 } 117 118 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90)); 119 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90)); 120 121 xcp = 240 + 120 * Math.cos(DegToRad(angle)); 122 ycp = 180 + 120 * Math.sin(DegToRad(angle)); 123 124 var x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2)); 125 var y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2)); 126 127 var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y, 128 xcp - shift_v_x, 129 ycp - shift_v_y, 130 xcp + shift_v_x, 131 ycp + shift_v_y); 132 133 pathlist.insertItemBefore(curve, pathlist.numberOfItems-1); 134 } 135 136 function RemoveSegment() 137 { 138 var pathelm = document.getElementById("mypath"); 139 var pathlist = pathelm.pathSegList; 140 141 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close 142 var angle = offset_angle; 143 var inc_angle = 360/(segments-1); 144 var shift_v_x, shift_v_y, xcp, ycp; 145 146 var move = pathlist.getItem(0); 147 move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2)); 148 move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2)); 149 150 for (var i = 0; i < segments-1; i++) 151 { 152 var curve = pathlist.getItem(1+i); 153 154 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90)); 155 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90)); 156 157 xcp = 240 + 120 * Math.cos(DegToRad(angle)); 158 ycp = 180 + 120 * Math.sin(DegToRad(angle)); 159 160 curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2)); 161 curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2)); 162 163 curve.x1 = xcp - shift_v_x; 164 curve.y1 = ycp - shift_v_y; 165 166 curve.x2 = xcp + shift_v_x; 167 curve.y2 = ycp + shift_v_y; 168 169 angle += inc_angle; 170 } 171 172 pathlist.removeItem(pathlist.numberOfItems-2); 173 } 174 175 function AdjustPath() 176 { 177 if (seg_diff > 0) 178 { 179 AddSegment(); 180 } 181 else 182 { 183 RemoveSegment(); 184 } 185 186 segments_added += seg_diff; 187 188 if (segments_added > 5) 189 seg_diff = -1; 190 else if (segments_added <= 0) 191 seg_diff = 1; 192 193 if(adjust_count < adjust_count_max) 194 { 195 adjust_count++; 196 setTimeout('AdjustPath()', 500); 197 } 198 } 199 200 function AnimatePath() 201 { 202 var pathelm = document.getElementById("mypath"); 203 var pathlist = pathelm.pathSegList; 204 205 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close 206 var angle = offset_angle; 207 var inc_angle = 360/segments; 208 for (var i = 0; i < segments; i++) 209 { 210 var curve = pathlist.getItem(1+i); 211 212 var shift_v_x, shift_v_y, xcp, ycp; 213 214 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90)); 215 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90)); 216 217 xcp = 240 + 120 * Math.cos(DegToRad(angle)); 218 ycp = 180 + 120 * Math.sin(DegToRad(angle)); 219 220 curve.x1 = xcp - shift_v_x; 221 curve.y1 = ycp - shift_v_y; 222 223 curve.x2 = xcp + shift_v_x; 224 curve.y2 = ycp + shift_v_y; 225 226 angle += inc_angle; 227 } 228 229 current_shift += shift_inc; 230 if (current_shift >= THRESHOLD || current_shift < 0) 231 shift_inc = -shift_inc; 232 233 if(adjust_count >= adjust_count_max) 234 { 235 anim_count++; 236 } 237 238 if(anim_count < anim_count_max) 239 setTimeout('AnimatePath();', 50); 240 else 241 document.getElementById("mypath").addEventListener("click", function func() { adjust_count_max=32768;anim_count_max=32768; AdjustPath(); AnimatePath(); }, false); 242 } 243 244 ]]></script> 245 <path d="" id="mypath" stroke="black" fill="blue"/> 246 </g> 247 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 248 <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.5 $</text> 249 </g> 250 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/> 251 <!-- comment out this watermark once the test is approved --> 252 <g id="draft-watermark"> 253 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> 254 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 255 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> 256 </g> 257 </svg> 258 </body> 259 </html>