SVG clipPath с инсультом

Question

Я хочу иметь звезду с рамкой. Как можно показать границу внутри клипа?

<svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;"> 
    <defs> 
    <clipPath id="clipping"> 
     <polygon points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" /> 
    </clipPath> 
    </defs> 
</svg> 

Пример: http://codepen.io/neilhem/pen/VYdeaQ

Answer 1

Я не думаю, что вы можете иметь видимый ход на clipPath, но вы могли бы use звезду в изображении, а также в clipPath: http://codepen.io/anon/pen/OPEMXd

<svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;"> 
    <defs> 
    <clipPath id="clipping"> 
     <polygon id="star" points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" /> 
    </clipPath> 
    </defs> 
</svg> 
<svg width="95" height="90" viewBox="0 0 98 94"> 
    <use xlink:href="#star" /> 
    <image style="clip-path: url(#clipping);" ... /> 
</svg> 

Редактировать: или наоборот, со звездой как часть изображения, также используемого в clipPath: http://codepen.io/anon/pen/GgGoxe

<svg width="95" height="90" viewBox="0 0 98 94"> 
    <defs> 
    <clipPath id="clipping"> 
     <use xlink:href="#star" /> 
    </clipPath> 
    </defs> 
    <polygon id="star" points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" /> 
    <image style="clip-path: url(#clipping);" ... /> 
</svg>