CodePen

HTML

            
              <svg width="100%" height="100%" viewBox="0 0 182 182" class="original">
	 <g id="marker">
<path class="leftOuter" fill="#666666" d="M0,91c0,50.258,40.742,91,91,91V0C40.742,0,0,40.742,0,91z"/>
<path fill="#ff0000" class="leftInner" d="M25.254,91c0,36.311,29.436,65.746,65.746,65.746V25.254C54.689,25.254,25.254,54.689,25.254,91z"/>
<path fill="#666666" class="rightOuter" d="M182,91c0-50.258-40.742-91-91-91v182C141.258,182,182,141.258,182,91z"/>
<path fill="#ff0000" class="rightInner" d="M156.746,91c0-36.311-29.436-65.746-65.746-65.746v131.492C127.311,156.746,156.746,127.311,156.746,91z"/>
</g>
</svg>


<svg viewBox="0 0 182 182" class="cloned">
  <use xlink:href="#marker">
</svg>
            
          
!

CSS

            
              svg {width:25%; display: inline-block;}

.original .rightInner{fill:#FF00FF;}
.cloned .rightInner{fill:#FFFF00;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................