Почему мой svg не отображается внутри div

Question

Я хочу показать элемент svg в div, но svg, который я разместил внутри div, вообще не отображается.

Как я могу сделать svg видимым в div?

http://codepen.io/helloworld/pen/HjkhK

<div style="height:100px;background:yellow;"> 
    <div style="float:left;background:orange;"> 

    <svg viewBox="0 0 100 100"> 
    <title>svg arrow with dropshadow</title> 
    <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
    <defs> 
    <filter id="dropshadow" height="130%"> 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
     <feOffset dx="2" dy="2" result="offsetblur"/> 
     <feMerge> 
     <feMergeNode/> 
     <feMergeNode in="SourceGraphic"/> 
     </feMerge> 
    </filter> 
    </defs> 
    <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="url(#svg_4)" filter="url(#dropshadow)"/> 
</svg> 

    </div> 
    <div style="float:left;background:red;">test333</div> 
    <div style="clear:both;"></div> 
</div> 

body,html{ 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 

Answer 1

Если вы хотите сделать его изменяемыми, вам нужно проценты в размерах

<div style="height:25%;width:25%;background:yellow;"> 
    <div style="float:left;background:orange;height:100%;width:100%;"> 

<svg viewBox="0 0 100 100"> 
<title>svg arrow with dropshadow</title> 
<desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
<defs> 
<filter id="dropshadow" height="130%"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2" result="offsetblur"/> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 
</defs> 
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="url(#svg_4)" filter="url(#dropshadow)"/> 
</svg> 

</div> 
<div style="float:left;background:red;">test333</div> 
<div style="clear:both;"></div> 
</div> 

Answer 2

Вы должны дать содержащий DIV «высота» и «ширина» значения, как в этом примере:

<div style="height:100px;background:yellow;"> 
    <div style="float:left;background:orange;height:100%;width:100px;"> 

<svg viewBox="0 0 100 100"> 
<title>svg arrow with dropshadow</title> 
<desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
<defs> 
<filter id="dropshadow" height="130%"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2" result="offsetblur"/> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 
</defs> 
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="url(#svg_4)" filter="url(#dropshadow)"/> 
</svg> 

</div> 
<div style="float:left;background:red;">test333</div> 
<div style="clear:both;"></div> 
</div>