D3 Examples - Interactive rota III

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Interactive rota III"/>
        <title>Interactive rota III</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <svg height="800" width="960">
          <defs>
            <pattern id="rota_img"
              patternUnits="userSpaceOnUse"
              x="-477.5"
              y="-308"
              width="780"
              height="780"
              viewBox="0 0 780 780">
              <image
                xlink:href="https://wafi.iit.cnr.it/webvis/tmp/clavius/rota_3.jpg"
                x="87"
                y="10"
                height="780"
                width="780"
              />
            </pattern>
            <pattern id="rota_hand_img"
              patternUnits="userSpaceOnUse"
              x="-477.5"
              y="-308"
              width="780"
              height="780"
              viewBox="0 0 780 780">
              <image
                xlink:href="https://wafi.iit.cnr.it/webvis/tmp/clavius/rota_3_hand.jpg"
                x="87"
                y="10"
                height="780"
                width="780"
              />
            </pattern>
          </defs>
          <g id="zoom_group">
            <g transform="translate(478,310)">
              <rect
                fill="url(#rota_img)"
                x="-391"
                y="-300"
                width="780"
                height="780"
              />
              <g id="rota_1" class="rota">
                <path
                  fill="url(#rota_hand_img)"
                  d="m 61.113344,-282.44625 -3.286977,1.11962 -1.941371,0.47251 -2.115992,4.22171 -1.818109,-0.82175 -1.232617,0.34924 -1.407237,1.18126 -0.585493,1.17099 0.236252,1.64349 0.698483,1.52022 0.236251,1.41751 -1.520227,1.69485 -1.643489,0.64712 -1.643488,0.0616 -2.115992,-0.53413 -2.701484,0.23625 -1.643489,0.82175 -1.057996,1.40723 -0.349241,1.46887 -0.123262,1.94137 -2.691212,-0.0616 -47.558452,209.873497 c -23.707054,5.89007 -41.292652,27.31432 -41.292652,52.83815956 0,30.06248044 24.388349,54.45083044 54.45083259,54.45083044 30.06248341,0 54.45083241,-24.38835 54.45083241,-54.45083044 0,-25.63536956 -17.736592,-47.14117956 -41.600806,-52.92032956 l 25.884946,-114.058117 18.900119,-81.22942 0.472503,-1.5305 -0.760113,-0.11299 6.984826,-30.76405 0,-0.93474 -1.76675,-0.64712 -1.458596,-0.4725 z"/>
                <path
                  class="highlight"
                  d="m 61.113344,-282.44625 -3.286977,1.11962 -1.941371,0.47251 -2.115992,4.22171 -1.818109,-0.82175 -1.232617,0.34924 -1.407237,1.18126 -0.585493,1.17099 0.236252,1.64349 0.698483,1.52022 0.236251,1.41751 -1.520227,1.69485 -1.643489,0.64712 -1.643488,0.0616 -2.115992,-0.53413 -2.701484,0.23625 -1.643489,0.82175 -1.057996,1.40723 -0.349241,1.46887 -0.123262,1.94137 -2.691212,-0.0616 -47.558452,209.873497 c -23.707054,5.89007 -41.292652,27.31432 -41.292652,52.83815956 0,30.06248044 24.388349,54.45083044 54.45083259,54.45083044 30.06248341,0 54.45083241,-24.38835 54.45083241,-54.45083044 0,-25.63536956 -17.736592,-47.14117956 -41.600806,-52.92032956 l 25.884946,-114.058117 18.900119,-81.22942 0.472503,-1.5305 -0.760113,-0.11299 6.984826,-30.76405 0,-0.93474 -1.76675,-0.64712 -1.458596,-0.4725 z"
                />
              </g>
            </g>
          </g>
        </svg>
        
        <script src="index.js"></script>
    </body>
</html>
    