0

我想在 div 中显示一个 svg 元素，但我放在 div 中的 svg 根本不可见。

如何使 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;
}
4

2 回答 2

1

您需要提供包含 div 'height' 和 'width' 值，如本例所示：

<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>
于 2013-07-30T12:58:40.203 回答
0

如果要使其可调整大小，则需要在尺寸中使用百分比

<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>
于 2013-07-30T17:38:17.177 回答