Добавление форм и строк svg в SVG обрезанный div

Question

Во-первых: материал, который я пытаюсь сделать, пока не совместим с хром. Пожалуйста, используйте firefox, чтобы проверить примеры.

Вот что я сделал:

http://jsfiddle.net/Robodude/ev6VF/1/

<style type="text/css"> 
    .clip3 { 
     clip-path: url(#c3); 
    } 
</style> 

    <svg height="0"> 
     <defs> 

     </defs> 

     <clipPath id="c3"> 
      <polygon points="75,0 225,0 275,100 225,200 75,200 25,100" /> 
     </clipPath> 
    </svg> 
    <div class="container left"> 
     <div id="Image1" class="Image1 image clip3"></div> 
     <div id="Image2" class="Image2 image clip3"></div> 
     <div id="Image3" class="Image3 image clip3"></div> 
    </div> 

То, что я хотел бы сделать, это нарисовать поверх HTML элементов, которые были обрезается для того, чтобы сделать некоторые акценты и границы к разрезанным изображениям, как показано ниже, через краску ms. Возможно ли это с помощью SVG? Возможно, я могу добавить другое свойство в .clip3 и каким-то образом связать его с некоторыми svg-формами?

Я испытываю много разных вещей - но они просто догадывается, и я не могу найти какие-либо ресурсы или информацию о том, как это сделать.

Как я надеялся, что это будет работать что-то вроде этого:

<style type="text/css"> 
    .clip3 { 
     clip-path: url(#c3); 
     border: url(#b1); 
    } 
</style> 

     <defs> 
      <polyline id = "b1" points="75,0 225,0 275,100 225,200 75,200 25,100" stroke = "blue" stroke-width = "5"/> 
     </defs> 

Answer 1

пришел с идеей, что я не считаю идеальным, но он работает ... = \

http://jsfiddle.net/Robodude/ev6VF/4/

<svg height="0"> 
    <clipPath id="c3"> 
     <polygon points="75,0 225,0 275,100 225,200 75,200 25,100"/> 
    </clipPath> 

    <defs> 
     <polyline id="top" points="225,200 75,200 25,100" style="fill:none;stroke:blue;stroke-width:10" /> 
     <polyline id="middle" points="225,0 275,100 225,200" style="fill:none;stroke:blue;stroke-width:10" /> 
     <polyline id="bottom" points="25,100 75,0 225,0" style="fill:none;stroke:blue;stroke-width:10" /> 
    </defs> 

</svg> 

<div class="container left"> 
    <div id="Image1" class="Image1 image clip3"> 
     <svg width="100%" height="100%"> 
      <use xlink:href = "#top"/> 
     </svg> 
    </div> 
    <div id="Image2" class="Image2 image clip3"> 
     <svg width="100%" height="100%"> 
      <use xlink:href = "#middle"/> 
     </svg> 
    </div> 
    <div id="Image3" class="Image3 image clip3"> 
     <svg width="100%" height="100%"> 
      <use xlink:href = "#bottom"/> 
     </svg> 
    </div> 
</div>