show.svg.erb

<% prop = @prop || @photo.face_prop %>
<% unless prop.blank? %>
  <svg height='<%= @photo.img_height %>' width='<%= @photo.img_width %>' version='1.1'
       xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink'>
    <style type='text/css'>
      <![CDATA[
        polyline {
          fill: none;
          stroke: #00C4FF;
          stroke-opacity: 0.8;
          stroke-width: 0.8;
        }

        circle {
          fill: #08FFFF;
          stroke-opacity: 0.6;
          r: .1em;
        }

        line {
          fill: none;
          stroke: #CCC;
          stroke-width: 1;
          stroke-opacity: 0.6;
        }
        
        line.dotted {
          stroke-dasharray: 10, 5;
        }

        line.red {
          stroke: #CC0000;
        }

        rect {
          fill: none;
          stroke: #00C4FF;
          stroke-width: 1;
          stroke-opacity: 0.6;
          stroke-dasharray: 10, 15, 5, 15;
        }

        rect.tag {
          fill: #F1F1F1;
        }

        text {
          color: #333;
          font-size: 13px;
        }
      ]]>
    </style>
    <g id='resource'>
      <image x='0' y='0' height='100%' width='100%' xlink:href='<%= @photo.photo_url(:hd) %>' />
    </g><!-- 原图 -->
    <g id='lines'>
      <line x1='<%= prop.outer_left[:x1] %>%'  y1='<%= prop.outer_left[:y1] %>%'  x2='<%= prop.outer_left[:x2] %>%'  y2='<%= prop.outer_left[:y2] %>%' />
      <line x1='<%= prop.outer_upper[:x1] %>%' y1='<%= prop.outer_upper[:y1] %>%' x2='<%= prop.outer_upper[:x2] %>%' y2='<%= prop.outer_upper[:y2] %>%' />
      
      <line x1='<%= prop.inner_left[:x1] %>%'  y1='<%= prop.inner_left[:y1] %>%'  x2='<%= prop.inner_left[:x2] %>%'  y2='<%= prop.inner_left[:y2] %>%' />
      <line x1='<%= prop.inner_upper[:x1] %>%' y1='<%= prop.inner_upper[:y1] %>%' x2='<%= prop.inner_upper[:x2] %>%' y2='<%= prop.inner_upper[:y2] %>%' />

      <line x1='<%= prop.inner_right[:x1] %>%' y1='<%= prop.inner_right[:y1] %>%' x2='<%= prop.inner_right[:x2] %>%' y2='<%= prop.inner_right[:y2] %>%' />
      <line x1='<%= prop.inner_lower[:x1] %>%' y1='<%= prop.inner_lower[:y1] %>%' x2='<%= prop.inner_lower[:x2] %>%' y2='<%= prop.inner_lower[:y2] %>%' />

      <line x1='<%= prop.outer_right[:x1] %>%' y1='<%= prop.outer_right[:y1] %>%' x2='<%= prop.outer_right[:x2] %>%' y2='<%= prop.outer_right[:y2] %>%' />
      <line x1='<%= prop.outer_lower[:x1] %>%' y1='<%= prop.outer_lower[:y1] %>%' x2='<%= prop.outer_lower[:x2] %>%' y2='<%= prop.outer_lower[:y2] %>%' />
    </g>
    <g id='points'>
      <% if @face.forehead_center? %>
        <circle id='forehead' cx='<%= @face.forehead_center.x %>%' cy='<%= @face.forehead_center.y %>%' style='fill: blue;' />
      <% end %>
      <circle id='eye'     cx='<%= prop.eye_point[:x] %>%'     cy='<%= prop.eye_point[:y] %>%' />
      <circle id='eyebrow' cx='<%= prop.eyebrow_point[:x] %>%' cy='<%= prop.eyebrow_point[:y] %>%' />
      <circle id='mouth'   cx='<%= prop.mouth_point[:x] %>%'   cy='<%= prop.mouth_point[:y] %>%' />
      <circle id='contour' cx='<%= prop.contour_point[:x] %>%' cy='<%= prop.contour_point[:y] %>%' />
    </g>
    <g id='border'>
      <line   x1='<%= prop.border_top[:x1] %>%' y1='<%= prop.border_top[:y1] %>%' x2='<%= prop.border_top[:x2] %>%' y2='<%= prop.border_top[:y2] %>%' />
      <circle cx='<%= prop.border_top[:x1] %>%' cy='<%= prop.border_top[:y1] %>%' />
      <circle cx='<%= prop.border_top[:x2] %>%' cy='<%= prop.border_top[:y2] %>%' />

      <line   x1='<%= prop.border_right[:x1] %>%' y1='<%= prop.border_right[:y1] %>%' x2='<%= prop.border_right[:x2] %>%' y2='<%= prop.border_right[:y2] %>%' />
      <circle cx='<%= prop.border_right[:x1] %>%' cy='<%= prop.border_right[:y1] %>%' />
      <circle cx='<%= prop.border_right[:x2] %>%' cy='<%= prop.border_right[:y2] %>%' />

      <line   x1='<%= prop.eye_gap_line[:x1] %>%' y1='<%= prop.eye_gap_line[:y1] %>%' x2='<%= prop.eye_gap_line[:x2] %>%' y2='<%= prop.eye_gap_line[:y2] %>%' id='eye_gap' class='red' />
      <circle cx='<%= prop.eye_gap_line[:x1] %>%' cy='<%= prop.eye_gap_line[:y1] %>%' />
      <circle cx='<%= prop.eye_gap_line[:x2] %>%' cy='<%= prop.eye_gap_line[:y2] %>%' />

      <line   x1='<%= prop.third_line[:x1] %>%' y1='<%= prop.third_line[:y1] %>%' x2='<%= prop.third_line[:x2] %>%' y2='<%= prop.third_line[:y2] %>%' id='third' class='red' />
      <circle cx='<%= prop.third_line[:x1] %>%' cy='<%= prop.third_line[:y1] %>%' />
      <circle cx='<%= prop.third_line[:x2] %>%' cy='<%= prop.third_line[:y2] %>%' />

      <rect width='<%= (prop.border_diag[:x2] - prop.border_diag[:x1]) %>%' height='<%= (prop.border_diag[:y2] - prop.border_diag[:y1]) %>%' x='<%= prop.border_diag[:x1] %>%' y='<%= prop.border_diag[:y1] %>%' />
    </g>
  </svg>
<% end %>