SVG target faces

PLEASE HELP TO FUND ARCHERY INTERCHANGE
eljetico

eljetico

Supporter
Supporter
Following up on an earlier post from 2014 which describes rendering target faces in HTML with CSS, I thought I'd share more recent explorations of using SVG (scalable vector graphics) to do the same.

A full demo is available here (view source code to, er, get the source code)..

Basically, a set of tags like this:

HTML: 
<svg id="svg_wa_6_zone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 600 600">

        <g>
          <!-- 5-RING -->
          <circle cx="300" cy="300" r="239" fill="#00B4E4"/>

          <!-- 6-RING -->
          <circle cx="300" cy="300" r="199" fill="#00B4E4" stroke="#000000" stroke-width="1"/>

          <!-- 7-RING -->
          <circle cx="300" cy="300" r="159" fill="#FD1B14" stroke="#000000" stroke-width="1"/>

          <!-- 8-RING -->
          <circle cx="300" cy="300" r="119" fill="#FD1B14" stroke="#000000" stroke-width="1"/>

          <!-- 9-RING -->
          <circle cx="300" cy="300" r="79" fill="#FFE552" stroke="#000000" stroke-width="1"/>

          <!-- 10-RING -->
          <circle cx="300" cy="300" r="39" fill="#FFE552" stroke="#000000" stroke-width="1"/>

          <!-- INNER 10-RING -->
          <circle cx="300" cy="300" r="19" fill="#FFE552" stroke="#000000" stroke-width="1"/>

          <g class="spider">
            <line x1="295" y1="300" x2="305" y2="300" stroke="#000000" stroke-width="1"/>
            <line x1="300" y1="295" x2="300" y2="305" stroke="#000000" stroke-width="1"/>
          </g>
        </g>
      </svg>
is all thats required to render the 6-zone WA target face. The height and width tags at the top indicate that the graphic will expand to fill the space afforded by the container, and the dimensions are 'keyed' on the view box dimensions - in this case, 600 'virtual' units. The cX, cY of the circles is therefore at 300, with appropriate radiuses for each.

Unlike raster graphics (such as canvas elements), fidelity of line, aliasing etc is much better at all sizes (hence the 'scaleable' bit). If you resize the window, the graphics will scale accordingly.

Its not exactly new technology but I'm using SVG in the next iteration of the xringscoring mobile app. Feel free to use these for your websites, your own innovative and insightful score-tracking applications etc. I'd appreciate a credit but won't lose sleep if you can't be a*sed.

Tim
 
eljetico

eljetico

Supporter
Supporter
I should also add that SVG can be styled using CSS too. Instead of inlining the fill, stroke values etc these can be omitted from the markup and applied in stylesheets with appropriate classes/selectors something like this:

HTML: 
// General 'ring' with black outline
g circle {
  stroke: #000000;
  stroke-width: 1;
}

// A blue ring, inherits the black outline above
g circle.wa_blue {
  fill: #00B4E4;
}

// Same for a red ring
g circle.wa_red {
  fill: #FD1B14;
}


T
 
You must log in or register to reply here.
Top