third_party/WebKit/LayoutTests/svg/as-background-image/resources/linguistics.svg

   1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   3  "http://www.w3.org/TR/SVG/DTD/svg10.dtd" >
   4 <svg width='100%' height='100%'
   5    xmlns='http://www.w3.org/2000/svg'
   6    xmlns:xlink='http://www.w3.org/1999/xlink'
   7    onload='Init(evt)'>
   8    <title>Phonetics Guide</title>
   9
  10    <desc>
  11       An animated multimedia guide to the formation of
  12       sounds in natural human languages, version 1.5.
  13       Based on data from Clark and Yallop (2nd ed.).
  14
  15       This application was created by Douglas Alan Schepers
  16       (doug@schepers.cc) for use in SVG-based linguistics
  17       applications. For non-commerical purposes, you may
  18       use or distribute this application free of charge,
  19       provided you include this notice; for commercial
  20       usage, please obtain a license.
  21
  22       All code copyright (c) D.A. Schepers, 2002-3.
  23    </desc>
  24
  25 <script language='JavaScript'><![CDATA[
  26
  27    var SVGDocument = null;
  28    var SVGRoot = null;
  29    var Tongue = null;
  30    var Palette = null;
  31    var Jaw = null;
  32    var VocalFolds = null;
  33    var Cartilage = null;
  34    //var Sound = null;
  35
  36    function Init(evt)
  37    {
  38       SVGDocument = evt.target.ownerDocument;
  39       SVGRoot = SVGDocument.documentElement;
  40
  41       Tongue = SVGDocument.getElementById('tongue');
  42       Palette = SVGDocument.getElementById('palette');
  43       Jaw = SVGDocument.getElementById('jaw');
  44       VocalFolds = SVGDocument.getElementById('vocalFolds');
  45       Cartilage = SVGDocument.getElementById('CuneiformCorniculateCartilage');
  46
  47       //Sound = SVGDocument.getElementById('sound');
  48       //PlaySound();
  49    };
  50
  51 /*
  52 next, I'm gonna animate the vocal chords and (top-down) and lips (front on) as well, and show air flow and air pressure gradients, all synced with the sound. if I can, anyway...
  53
  54    function PlaySound()
  55    {
  56        Sound.beginElement();
  57        setTimeout('PlaySound()', 5000);
  58    };
  59 */
  60
  61
  62    function ShowPosition(evt, isShow)
  63    {
  64       try
  65       {
  66          var button = evt.target;
  67          var buttonId = button.getAttribute('id');
  68          var place = buttonId.split('-')[0];
  69
  70          var labelText = place;
  71          var labelColor = 'gold';
  72          if (!isShow)
  73          {
  74             labelColor = 'white';
  75             place = 'rest';
  76          }
  77
  78          var label = SVGDocument.getElementById(labelText + '-Label');
  79          label.setAttributeNS(null, 'fill', labelColor);
  80
  81          if ('voiced' == place || 'voiceless' == place)
  82          {
  83             var vocalFoldsPosition = place;
  84             if (!vocalFoldsArray[place])
  85             {
  86                vocalFoldsPosition = 'voiceless';
  87                cartilagePosition = 'voiceless';
  88             }
  89             var vocalFoldsDesc = vocalFoldsArray[vocalFoldsPosition];
  90             newVocalFolds = vocalFoldsDesc;
  91
  92             var cartilagePosition = place;
  93             if (!cartilageArray[place])
  94             {
  95                cartilagePosition = 'voiceless';
  96             }
  97             var cartilageDesc = cartilageArray[cartilagePosition];
  98             newCartilage = cartilageDesc;
  99
 100             AnimateVocalFolds();
 101             AnimateCartilage();
 102          }
 103          else
 104          {
 105
 106             var jawPosition = place;
 107             if (!jawArray[place])
 108             {
 109                jawPosition = 'rest';
 110             }
 111             var jawDesc = jawArray[jawPosition];
 112
 113             var palettePosition = place;
 114             if (!paletteArray[place])
 115             {
 116                palettePosition = 'pharyngeal';
 117             }
 118             var paletteDesc = paletteArray[palettePosition];
 119
 120             var tonguePosition = place;
 121             if (!tongueArray[place])
 122             {
 123                tonguePosition = 'rest';
 124             }
 125             var tongueDesc = tongueArray[tonguePosition];
 126
 127             newTongue = tongueDesc;
 128             AnimateTongue();
 129
 130             newJaw = jawDesc;
 131             AnimateJaw();
 132             newPalette = paletteDesc;
 133             AnimatePalette();
 134          }
 135
 136       }
 137       catch(er)
 138       {
 139          alert('Error in function ShowPosition:\n' + er.message)
 140       }
 141    };
 142
 143
 144    function AnimateMouth(mouthPart, currentPos, newPos)
 145    {
 146       try
 147       {
 148          var currentPos = mouthPart.getAttributeNS(null, 'd');
 149          newPos = newPos.replace(/,/g, ' ');
 150          currentPos = currentPos.replace(/,/g, ' ');
 151
 152          if (newPos != currentPos)
 153          {
 154             var changed = false;
 155
 156
 157             var currentArray = currentPos.split(/\W+/);
 158             var newArray = newPos.split(/\W+/);
 159             for (var n = 0; currentArray.length > n; n++)
 160             {
 161                if (currentArray[n])
 162                {
 163                   header = currentArray[n].match(/\D/);
 164                   eachCurrentNum = Number(currentArray[n].match(/\d+/));
 165                   eachNewNum = Number(newArray[n].match(/\d+/));
 166
 167                   if (eachNewNum > eachCurrentNum)
 168                   {
 169                      eachCurrentNum++;
 170                      changed = true;
 171                      //alert(eachNewNum +' : ' + eachCurrentNum)
 172                   }
 173                   else if (eachNewNum < eachCurrentNum)
 174                   {
 175                      eachCurrentNum--;
 176                      changed = true;
 177                   }
 178                   currentArray[n] = header + eachCurrentNum;
 179                }
 180             }
 181
 182             var currentPos = currentArray.join(' ');
 183             mouthPart.setAttributeNS(null, 'd', currentPos);
 184
 185             if (changed)
 186             {
 187                //alert(0)
 188                //window.status = newPos +' :: ' + currentPos;
 189                window.setTimeout(AnimateMouth(mouthPart, currentPos, newPos), 1000000);
 190             }
 191          }
 192       }
 193       catch(er)
 194       {
 195          alert('Error in function AnimateMouth:\n' + er.message)
 196       }
 197    };
 198
 199
 200    var newTongue = null;
 201    function AnimateTongue()
 202    {
 203       try
 204       {
 205          var currentTongue = Tongue.getAttributeNS(null, 'd');
 206          newTongue = newTongue.replace(/,/g, ' ');
 207          currentTongue = currentTongue.replace(/,/g, ' ');
 208
 209          if (newTongue != currentTongue)
 210          {
 211             var changed = false;
 212
 213             var descArray = currentTongue.split(/\W+/);
 214             var newArray = newTongue.split(/\W+/);
 215             for (var n = 0; descArray.length > n; n++)
 216             {
 217                if (descArray[n])
 218                {
 219                   header = descArray[n].match(/\D/);
 220                   eachDescNum = Number(descArray[n].match(/\d+/));
 221                   eachNewNum = Number(newArray[n].match(/\d+/));
 222
 223                   if (eachNewNum > eachDescNum)
 224                   {
 225                      eachDescNum++;
 226                      changed = true;
 227                   }
 228                   else if (eachNewNum < eachDescNum)
 229                   {
 230                      eachDescNum--;
 231                      changed = true;
 232                   }
 233                   descArray[n] = header + eachDescNum;
 234                }
 235             }
 236
 237             var tempDesc = descArray.join(' ');
 238             Tongue.setAttributeNS(null, 'd', tempDesc);
 239
 240             if (changed)
 241             {
 242                window.setTimeout('AnimateTongue()', 1);
 243             }
 244          }
 245       }
 246       catch(er)
 247       {
 248          alert('Error in function AnimateTongue:\n' + er.message)
 249       }
 250    };
 251
 252
 253
 254    var newJaw = null;
 255    function AnimateJaw()
 256    {
 257       try
 258       {
 259          var currentJaw = Jaw.getAttributeNS(null, 'd');
 260          newJaw = newJaw.replace(/,/g, ' ');
 261          currentJaw = currentJaw.replace(/,/g, ' ');
 262
 263          if (newJaw != currentJaw)
 264          {
 265             var changed = false;
 266
 267             var descArray = currentJaw.split(/\W+/);
 268             var newArray = newJaw.split(/\W+/);
 269             for (var n = 0; descArray.length > n; n++)
 270             {
 271                if (descArray[n])
 272                {
 273                   header = descArray[n].match(/\D/);
 274                   eachDescNum = Number(descArray[n].match(/\d+/));
 275                   eachNewNum = Number(newArray[n].match(/\d+/));
 276
 277                   if (eachNewNum > eachDescNum)
 278                   {
 279                      eachDescNum++;
 280                      changed = true;
 281                   }
 282                   else if (eachNewNum < eachDescNum)
 283                   {
 284                      eachDescNum--;
 285                      changed = true;
 286                   }
 287                   descArray[n] = header + eachDescNum;
 288                }
 289             }
 290
 291             var tempDesc = descArray.join(' ');
 292             Jaw.setAttributeNS(null, 'd', tempDesc);
 293
 294             if (changed)
 295             {
 296                window.setTimeout('AnimateJaw()', 1);
 297             }
 298          }
 299       }
 300       catch(er)
 301       {
 302          alert('Error in function AnimateJaw:\n' + er.message)
 303       }
 304    };
 305
 306
 307    var newPalette = null;
 308    function AnimatePalette()
 309    {
 310       try
 311       {
 312          var currentPalette = Palette.getAttributeNS(null, 'd');
 313          newPalette = newPalette.replace(/,/g, ' ');
 314          currentPalette = currentPalette.replace(/,/g, ' ');
 315
 316          if (newPalette != currentPalette)
 317          {
 318             var changed = false;
 319
 320             var descArray = currentPalette.split(/\W+/);
 321             var newArray = newPalette.split(/\W+/);
 322             for (var n = 0; descArray.length > n; n++)
 323             {
 324                if (descArray[n])
 325                {
 326                   header = descArray[n].match(/\D/);
 327                   eachDescNum = Number(descArray[n].match(/\d+/));
 328                   eachNewNum = Number(newArray[n].match(/\d+/));
 329
 330                   if (eachNewNum > eachDescNum)
 331                   {
 332                      eachDescNum++;
 333                      changed = true;
 334                   }
 335                   else if (eachNewNum < eachDescNum)
 336                   {
 337                      eachDescNum--;
 338                      changed = true;
 339                   }
 340                   descArray[n] = header + eachDescNum;
 341                }
 342             }
 343
 344             var tempDesc = descArray.join(' ');
 345             Palette.setAttributeNS(null, 'd', tempDesc);
 346
 347             if (changed)
 348             {
 349                window.setTimeout('AnimatePalette()', 0);
 350             }
 351          }
 352       }
 353       catch(er)
 354       {
 355          alert('Error in function AnimatePalette:\n' + er.message)
 356       }
 357    };
 358
 359
 360    var newVocalFolds = null;
 361    function AnimateVocalFolds()
 362    {
 363       try
 364       {
 365          var currentVocalFolds = VocalFolds.getAttributeNS(null, 'd');
 366          newVocalFolds = newVocalFolds.replace(/,/g, ' ');
 367          currentVocalFolds = currentVocalFolds.replace(/,/g, ' ');
 368
 369          if (newVocalFolds != currentVocalFolds)
 370          {
 371             var changed = false;
 372
 373             var descArray = currentVocalFolds.split(/\W+/);
 374             var newArray = newVocalFolds.split(/\W+/);
 375             for (var n = 0; descArray.length > n; n++)
 376             {
 377                if (descArray[n])
 378                {
 379                   header = descArray[n].match(/\D/);
 380                   eachDescNum = Number(descArray[n].match(/\d+/));
 381                   eachNewNum = Number(newArray[n].match(/\d+/));
 382
 383                   if (eachNewNum > eachDescNum)
 384                   {
 385                      eachDescNum++;
 386                      changed = true;
 387                   }
 388                   else if (eachNewNum < eachDescNum)
 389                   {
 390                      eachDescNum--;
 391                      changed = true;
 392                   }
 393                   descArray[n] = header + eachDescNum;
 394                }
 395             }
 396
 397             var tempDesc = descArray.join(' ');
 398             VocalFolds.setAttributeNS(null, 'd', tempDesc);
 399
 400             if (changed)
 401             {
 402                window.setTimeout('AnimateVocalFolds()', 0);
 403             }
 404          }
 405       }
 406       catch(er)
 407       {
 408          alert('Error in function AnimateVocalFolds:\n' + er.message)
 409       }
 410    };
 411
 412
 413    var newCartilage = null;
 414    function AnimateCartilage()
 415    {
 416       try
 417       {
 418          var currentCartilage = Cartilage.getAttributeNS(null, 'd');
 419          newCartilage = newCartilage.replace(/,/g, ' ');
 420          currentCartilage = currentCartilage.replace(/,/g, ' ');
 421
 422          if (newCartilage != currentCartilage)
 423          {
 424             var changed = false;
 425
 426             var descArray = currentCartilage.split(/\W+/);
 427             var newArray = newCartilage.split(/\W+/);
 428             for (var n = 0; descArray.length > n; n++)
 429             {
 430                if (descArray[n])
 431                {
 432                   //alert(descArray[n])
 433                   header = descArray[n].match(/\D/);
 434                   eachDescNum = Number(descArray[n].match(/\d+/));
 435                   eachNewNum = Number(newArray[n].match(/\d+/));
 436
 437                   if ('Z' == header)
 438                   {
 439                      eachDescNum = '';
 440                   }
 441                   else if (eachNewNum > eachDescNum)
 442                   {
 443                      eachDescNum++;
 444                      changed = true;
 445                   }
 446                   else if (eachNewNum < eachDescNum)
 447                   {
 448                      eachDescNum--;
 449                      changed = true;
 450                   }
 451                   descArray[n] = header + eachDescNum;
 452                }
 453             }
 454
 455             var tempDesc = descArray.join(' ');
 456             Cartilage.setAttributeNS(null, 'd', tempDesc);
 457
 458             if (changed)
 459             {
 460                window.setTimeout('AnimateCartilage()', 0);
 461             }
 462          }
 463       }
 464       catch(er)
 465       {
 466          alert('Error in function AnimateCartilage:\n' + er.message)
 467       }
 468    };
 469
 470
 471
 472    var tongueArray = new Array();
 473    tongueArray['rest'] = 'M159,283 C179,254 128,235 91,243 S59,264 86,280 ';
 474    tongueArray['dental'] = 'M159,283 C173,248 129,246 85,241 S58,259 86,280';
 475    tongueArray['interdental'] = 'M159,283 C174,244 130,236 79,250 S67,259 86,280';
 476    tongueArray['alveolar'] = 'M159,283 C174,244 131,254 87,242 S68,254 86,280';
 477    tongueArray['alveopalatal'] = 'M159,283 C145,247 91,206 74,246 S103,224 86,280';
 478    tongueArray['palatal'] = 'M159,283 C177,213 113,214 87,248 S107,247 86,280';
 479    tongueArray['velar'] = 'M159,283 C158,162 126,236 88,249 S93,261 86,280';
 480    tongueArray['uvular'] = 'M159,283 C183,177 147,230 94,249 S93,261 86,280';
 481    tongueArray['pharyngeal'] = 'M159,283 C204,257 196,219 120,246 S109,261 86,280';
 482
 483    var jawArray = new Array();
 484    jawArray['rest'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,283 64,270 T61,283 C49,279 54,259 38,267 S44,285 39,301 C27,352 55,341 101,340 S131,364 136,375 Q143,399 140,420';
 485    jawArray['bilabial'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,278 64,262 T60,274 C47,273 53,251 37,256 S41,268 37,291 C26,342 55,332 101,340 S131,364 136,375 Q143,399 140,420';
 486    jawArray['labiodental'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,278 64,262 T60,274 C47,273 70,262 49,254 S47,267 37,291 C26,342 55,332 101,340 S131,364 136,375 Q143,399 140,420';
 487    jawArray['pharyngeal'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 88,278 Q70,298 63,280 T60,290 C48,288 54,268 38,276 S44,294 39,310 C27,361 55,350 99,349 S131,364 136,375 Q143,399 140,420';
 488
 489    var paletteArray = new Array();
 490    paletteArray['rest'] = 'M30,221 C119,224 140,201 166,207 C177,223 173,245 163,228 S144,220 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
 491    paletteArray['glottal'] = 'M30,221 C119,224 140,201 166,207 C177,223 173,245 163,228 S144,220 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
 492    paletteArray['bilabial'] = 'M30,221 C118,220 140,199 175,211 C182,232 182,254 170,230 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C43,241 48,258 34,255 S36,241 29,221';
 493    paletteArray['labiodental'] = 'M30,221 C118,220 138,193 170,203 C179,221 178,245 165,222 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C43,229 48,258 33,250 S37,238 29,221';
 494    paletteArray['pharyngeal'] = 'M30,221 C118,220 138,193 170,203 C179,221 178,245 165,222 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
 495
 496    var vocalFoldsArray = new Array();
 497    vocalFoldsArray['voiceless'] = 'M270,309 Q281,334 284,364 L295,360 Q291,324 275,301 H265 Q249,324 245,360 L256,364 Q259,334 270,309';
 498    vocalFoldsArray['voiced'] = 'M270,309 Q271,334 271,371 L283,364 Q285,324 275,301 H265 Q254,324 257,364 L269,371 Q269,334 270,309';
 499
 500    var cartilageArray = new Array();
 501    cartilageArray['voiceless'] = 'M225,322 L230,339 Q243,347 250,359 262,364 270,371 279,364 290,359 298,347 310,339 L314,322 320,326 315,339 Q310,354 298,364 288,378 270,374 252,378 242,364 230,354 225,339 L219,326 Z';
 502    cartilageArray['voiced'] = 'M225,322 L230,339 Q246,351 250,359 263,359 270,371 278,359 290,359 295,351 310,339 L314,322 320,326 315,339 Q309,360 298,364 288,379 270,374  252,379 242,364 231,360 225,339 L219,326 Z';
 503
 504 ]]></script>
 505
 506
 507    <g stroke='brown' stroke-width='2' fill='pink'>
 508
 509       <path id='head'
 510          d='M226,411 C190,338 201,286 182,231 C164,174 173,213 132,178 C125,172 126,153 94,160 S68,143 17,206 Q14,212 16,219 C-10,212 17,188 40,166 S36,132 46,105 C63,23 205,-9 264,13 S419,95 340,212 Q313,254 346,367 '
 511          />
 512
 513       <path id='palette'
 514          d='M30,221 C119,224 140,201 166,207 C177,223 173,245 163,228 S144,220 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221 '
 515          />
 516
 517       <path id='jaw'
 518          d='M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,283 64,270 T61,283 C49,279 54,259 38,267 S44,285 39,301 C27,352 55,341 101,340 S131,364 136,375 Q143,399 140,420 '
 519          />
 520
 521       <path id='esophagus'
 522          d='M207,416 C205,404 198,368 193,353 C184,348 159,355 160,350 C172,344 187,346 188,345 C190,343 187,331 194,334 C197,334 208,394 212,415'
 523          />
 524
 525 <!--
 526       <path id='esophagus'
 527          d='M207,416 C205,404 198,368 193,353 C184,348 182,353 179,350 C172,344 187,346 188,345 C190,343 187,331 194,334 C197,334 208,394 212,415'
 528          />
 529       <path id='vocalChords'
 530          d='M184,350 L160,356 M160,352 L179,345'
 531          fill-rule='evenodd'
 532          />
 533 -->
 534
 535
 536       <path id='tongue'
 537          d='M159,283 C179,254 128,235 91,243 S59,264 86,280 '
 538          />
 539    </g>
 540
 541
 542 <!--
 543       <text id='TongueText' x='-126' y='-91'>
 544             <textPath id='tonguePath' xlink:href='#tongue' startOffset='50%'>text on path
 545             </textPath>
 546       </text>
 547             <animate id='firsttpath' attributeName='startOffset' values='0%;77.5%' keyTimes='0;1' dur='20s' repeatCount='indefinite' fill='freeze'/>
 548
 549 -->
 550
 551    <circle cx='175' cy='350' r='22' stroke='gray' fill='white' opacity='0.5'/>
 552    <circle cx='270' cy='330' r='50' stroke='gray' fill='white' opacity='0.7'/>
 553    <line x1='166' y1='330' x2='248' y2='285' stroke='gray' fill='none' opacity='0.5' stroke-linecap='round'/>
 554    <line x1='175' y1='372' x2='267' y2='380' stroke='gray' fill='none' opacity='0.5' stroke-linecap='round'/>
 555
 556    <defs>
 557       <radialGradient id='fade'>
 558          <stop offset='90%' stop-color='white' stop-opacity='1.0'/>
 559          <stop offset='95%' stop-color='white' stop-opacity='0.5'/>
 560          <stop offset='100%' stop-color='white' stop-opacity='0.0'/>
 561       </radialGradient>
 562       <mask id='fademask'>
 563          <circle cx='270' cy='330' r='50' fill='url(#fade)'/>
 564       </mask>
 565    </defs>
 566
 567    <g id='phraynx' mask='url(#fademask)'>
 568       <ellipse id='vocalBack' cx='270' cy='330' rx='44' ry='40' fill='pink'/>
 569       <path id='gap'
 570          d='M270,309 Q285,334 284,361
 571             Q279,364 270,371 262,364 256,361
 572             Q256,334 270,309'
 573             fill='#87cefa' fill-opacity='0.5'
 574          />
 575       <g fill='pink' fill-rule='evenodd' stroke='brown' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
 576          <path id='vocalFolds'
 577             d='M270,309 Q281,334 284,364
 578                L295,360 Q291,324 275,301
 579                H265 Q249,324 245,360
 580                L256,364 Q259,334 270,309'
 581                fill='white' stroke='#ff6347'
 582             />
 583
 584          <path id='CuneiformCorniculateCartilage'
 585             d='M225,322 L230,339
 586                Q243,347 250,359 262,364 270,371 279,364 290,359 298,347 310,339
 587                L314,322 320,326 315,339
 588                Q310,354 298,364 288,378 270,374  252,378 242,364 230,354 225,339
 589                L219,326 Z'
 590                fill='#eee8aa' stroke='#daa520'
 591             />
 592          <path id='oddThing'
 593             d='M250,299 Q270,319 290,299'
 594             />
 595          <path id="epiglottis"
 596             d='M215,327 C238,324 243,302 270,300 297,302 302,324 325,327 V324
 597                C301,321 310,278 270,289 230,278 241,321 215,324 Z'
 598             />
 599       </g>
 600    </g>
 601
 602
 603    <g stroke='blue' fill='cornflowerblue'
 604       onmouseover='ShowPosition(evt, true)'
 605       onmouseout='ShowPosition(evt, false)'>
 606       <rect id='bilabial-Button' x='400' y='10' width='100' height='20' rx='5' ry='5'/>
 607       <rect id='labiodental-Button' x='400' y='40' width='100' height='20' rx='5' ry='5'/>
 608       <rect id='dental-Button' x='400' y='70' width='100' height='20' rx='5' ry='5'/>
 609       <rect id='interdental-Button' x='400' y='100' width='100' height='20' rx='5' ry='5'/>
 610       <rect id='alveolar-Button' x='400' y='130' width='100' height='20' rx='5' ry='5'/>
 611       <rect id='alveopalatal-Button' x='400' y='160' width='100' height='20' rx='5' ry='5'/>
 612       <rect id='palatal-Button' x='400' y='190' width='100' height='20' rx='5' ry='5'/>
 613       <rect id='velar-Button' x='400' y='220' width='100' height='20' rx='5' ry='5'/>
 614       <rect id='uvular-Button' x='400' y='250' width='100' height='20' rx='5' ry='5'/>
 615       <rect id='pharyngeal-Button' x='400' y='280' width='100' height='20' rx='5' ry='5'/>
 616       <rect id='glottal-Button' x='400' y='310' width='100' height='20' rx='5' ry='5'/>
 617
 618       <rect id='voiced-Button' x='400' y='370' width='100' height='20' rx='5' ry='5'/>
 619       <rect id='voiceless-Button' x='400' y='400' width='100' height='20' rx='5' ry='5'/>
 620    </g>
 621
 622    <g fill='white' pointer-events='none' text-anchor='middle' font-size='14px'>
 623       <text id='bilabial-Label' x='450' y='25'>Bilabial</text>
 624       <text id='labiodental-Label' x='450' y='55'>Labiodental</text>
 625       <text id='dental-Label' x='450' y='85'>Dental</text>
 626       <text id='interdental-Label' x='450' y='115'>Interdental</text>
 627       <text id='alveolar-Label' x='450' y='145'>Alveolar</text>
 628       <text id='alveopalatal-Label' x='450' y='175'>Alveopalatal</text>
 629       <text id='palatal-Label' x='450' y='205'>Palatal</text>
 630       <text id='velar-Label' x='450' y='235'>Velar</text>
 631       <text id='uvular-Label' x='450' y='265'>Uvular</text>
 632       <text id='pharyngeal-Label' x='450' y='295'>Pharyngeal</text>
 633       <text id='glottal-Label' x='450' y='325'>Glottal</text>
 634
 635       <text id='voiced-Label' x='450' y='385'>Voiced</text>
 636       <text id='voiceless-Label' x='450' y='415'>Voiceless</text>
 637    </g>
 638
 639
 640
 641 <!--
 642    <asv='audio id='sound' xlink='href='bilabialClick.mp3' begin='indefinite' />
 643 -->
 644
 645
 646 </svg>