Orientation Definition in Open Access

by rightson

HTML

<form>
    <input type="radio" name="orient" value="R0" checked="checked" />R0
    <input type="radio" name="orient" value="R90" />R90
    <input type="radio" name="orient" value="R180" />R180
    <input type="radio" name="orient" value="R270" />R270
    <input type="radio" name="orient" value="MY" />MY
    <input type="radio" name="orient" value="MX" />MX
    <input type="radio" name="orient" value="MY90" />MY90
    <input type="radio" name="orient" value="MX90" />MX90
</form>
    
<svg width="600" height="600">
  <g transform="translate(0,300) scale(1,-1)">
    <path id="R0" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="base" transform=""></path>
    <path id="R180" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(0, 0) rotate(180,150,200)"></path>  
    <path id="R90" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(0, 0) rotate(90,150,200)"></path>
    <path id="R270" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(0, 0) rotate(270,150,200)"></path>
    <path id="MY" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(300, 0) scale(-1, 1)"></path>
    <path id="MX" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(0, 400) scale(1, -1)"></path>
    <path id="MY90" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(300, 0) scale(-1, 1) rotate(90,150,200)"></path>
    <path id="MX90" d="M100,150 150,150 150,100 200,100 200,300 100,300z" 
        class="orient" transform="translate(0, 400) scale(1, -1) rotate(90,150,200)"></path>    
  </g>
</svg>

CSS

.base {
    fill: green;
    stroke: none;
    stroke-width: 0;
}

.orient {
    display: none;
    fill: none;
    stroke: red;
    stroke-width: 2;
}

form {
    margin: 10px;
}

JavaScript

$('input:radio').change(function() {
    var orient = $(this).val()
    $('.orient').css('display','none');
    $('#' + orient).css('display','block');
});