为什么def组中的SVG没有显示？

时间：2016-02-29 15:35:55

标签： html css svg

我无法解释以下行为。我使用grunt svg sprite来创建某个目录中所有SVG文件的SVG精灵。

结构如下：

<svg width="0" height="0" style="position:absolute">
  <defs>
     //my svgs
  </defs>
</svg>

这里的小提琴： https://jsfiddle.net/swf8rtog/

计划是在body标签的内联中导入这些SVG组，这样我就不需要额外的图标字体请求了。对于svg图标的多次使用，您可以使用use xlink:href="#id_of_the_original_svg"进行引用。您可以在此页面上看到一个有效的示例：http://www.chip.de/preisvergleich/

我尝试用CSS显示SVG，给它们宽度，高度，显示：块，颜色，填充等属性，但没有任何效果。

但路径似乎是正确的。未在def组中加载时，图标会显示：https://jsfiddle.net/vtnLnsrh/

那我错过了什么？为什么不起作用？

1 个答案:

答案 0 :(得分：4)

<defs不应该是可见的。它们是以后要使用的定义。

每MDN

  

SVG允许定义图形对象以供以后重用。建议尽可能在defs元素内定义引用元素。在defs元素内定义这些元素可以提高SVG内容的可理解性，从而提高可访问性。

     

defs中定义的图形元素不会直接呈现。您可以使用<use>元素在视口上的任何位置渲染这些元素。 

<svg>
  <use xlink:href = "#star"/>
</svg>

＆＃13;
＆＃13; 
<svg style="display:none">
  <defs>
    <svg viewbox="0 0 18 28" id="angle-down">
      <path d="M16.797 11.5q0 .203-.156.36l-7.28 7.28q-.156.156-.36.156t-.358-.156l-7.28-7.28q-.157-.157-.157-.36t.156-.36l.782-.78q.156-.156.36-.156t.358.156L9 16.5l6.142-6.14q.156-.156.36-.156t.358.156l.78.78q.157.157.157.36z" />
    </svg>
    <svg viewbox="0 0 18 28" id="angle-up">
      <path d="M16.797 18.5q0 .203-.156.36l-.78.78q-.156.156-.36.156t-.358-.156l-6.14-6.14-6.142 6.14q-.156.156-.36.156t-.358-.156l-.78-.78q-.157-.157-.157-.36t.156-.36l7.282-7.28q.156-.156.36-.156t.358.156l7.28 7.28q.157.157.157.36z" />
    </svg>
    <svg viewbox="0 0 32 32" id="area">
      <path d="M19.556 16a3.556 3.556 0 1 1-7.112 0 3.556 3.556 0 0 1 7.112 0z" />
      <path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16h-2.37c0 7.527-6.102 13.63-13.63 13.63S2.37 23.528 2.37 16C2.37 8.473 8.472 2.37 16 2.37V0z" />
      <path d="M16 5.926c-5.564 0-10.074 4.51-10.074 10.074S10.436 26.074 16 26.074 26.074 21.564 26.074 16h-2.37a7.704 7.704 0 0 1-15.408 0A7.704 7.704 0 0 1 16 8.296v-2.37z" />
      <path d="M17.185 15.704V0h-2.37v16.89h2.37v-1.186z" />
    </svg>
    <svg viewbox="0 0 24 28" id="bullseye">
      <path d="M16 14q0 1.656-1.172 2.828T12 18t-2.828-1.172T8 14t1.172-2.828T12 10t2.828 1.172T16 14zm2 0q0-2.484-1.758-4.242T12 8 7.758 9.758 6 14t1.758 4.242T12 20t4.242-1.758T18 14zm2 0q0 3.313-2.344 5.656T12 22t-5.656-2.344T4 14t2.344-5.656T12 6t5.656 2.344T20 14zm2 0q0-2.03-.797-3.883T19.07 6.93t-3.187-2.133T12 4t-3.883.797T4.93 6.93t-2.133 3.187T2 14t.797 3.883T4.93 21.07t3.187 2.133T12 24t3.883-.797 3.187-2.133 2.133-3.187T22 14zm2 0q0 3.266-1.61 6.023t-4.366 4.367T12 26 5.98 24.39 1.61 20.023.003 14t1.61-6.023T5.977 3.61 12 2t6.024 1.61 4.367 4.367T24 14z"
      />
    </svg>
    <svg viewbox="0 0 19 28" id="chevron-right">
      <path d="M17.297 13.703L5.703 25.297q-.297.297-.703.297t-.703-.297l-2.594-2.594q-.297-.297-.297-.703t.297-.703L10 13 1.703 4.703Q1.406 4.406 1.406 4t.297-.703L4.297.703Q4.594.406 5 .406t.703.297l11.594 11.594q.297.297.297.703t-.297.703z" />
    </svg>
    <svg viewbox="0 0 32 32" id="close">
      <path d="M18.208 16l13.66 13.66-2.21 2.207L16 18.207 2.34 31.868.134 29.66 13.793 16 .132 2.34 2.34.134 16 13.793 29.66.132l2.207 2.208L18.207 16z" />
    </svg>
    <svg viewbox="0 0 22 28" id="close_bold">
      <path d="M20.28 20.656q0 .625-.437 1.062l-2.125 2.125q-.438.438-1.062.438t-1.062-.437L11 19.25l-4.594 4.593q-.438.438-1.062.438t-1.062-.437l-2.125-2.125q-.438-.438-.438-1.062t.437-1.062L6.75 15l-4.593-4.594q-.438-.438-.438-1.062t.437-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.437L11 10.75l4.594-4.593q.438-.438 1.062-.438t1.062.437l2.125 2.125q.438.438.438 1.062t-.437 1.062L15.25 15l4.593 4.594q.438.438.438 1.062z"
      />
    </svg>
    <svg viewbox="0 0 32 32" id="location">
      <path d="M16.187 21.708a5.522 5.522 0 1 0-5.52-5.52 5.52 5.52 0 0 0 5.52 5.52z" />
      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"
      />
      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.676v3.225h3.556V0h-3.556v1.482zM1.306 17.778h2.842v-3.556H0v3.556h1.306z" />
    </svg>
    <svg viewbox="0 0 32 32" id="location_searching">
      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"
      />
      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.677v3.226h3.556V0h-3.556v1.48zM1.306 17.78h2.842v-3.556H0v3.556h1.306z" />
    </svg>
    <svg viewbox="0 0 36 32" id="messages">
      <path d="M24.542 28.9c0 .617-.52 1.118-1.16 1.118H3.22c-.64 0-1.16-.5-1.16-1.117V3.205c0-.616.52-1.116 1.16-1.116H23.38c.64 0 1.16.5 1.16 1.116V9.13l-6.188 5.957 3.713 3.574 2.475-2.378v12.62zM34.93 4.05l-1.387-1.335c-.642-.618-1.632-.676-2.2-.13l-4.74 4.563V3.204c0-1.71-1.444-3.1-3.22-3.1H3.22C1.444.105 0 1.495 0 3.205V28.9C0 30.61 1.444 32 3.22 32h20.163c1.775 0 3.22-1.39 3.22-3.1V14.3l8.46-8.134c.57-.546.508-1.5-.134-2.117z"
      />
      <path d="M16.17 19.797c-.238.757.21 1.192 1 .963l3.896-1.134-3.714-3.573-1.182 3.744zM4.925 7.847H21.02c.57 0 1.03-.445 1.03-.993s-.46-.992-1.03-.992H4.926c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zM21.02 24.08H4.926c-.57 0-1.03.444-1.03.993 0 .547.46.992 1.03.992H21.02c.57 0 1.03-.445 1.03-.992 0-.548-.46-.992-1.03-.992zM4.926 13.92H15.06c.567 0 1.03-.444 1.03-.992s-.463-.992-1.03-.992H4.924c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zm0 6.073h8.24c.57 0 1.03-.444 1.03-.99 0-.55-.46-.993-1.03-.993h-8.24c-.57 0-1.03.443-1.03.992 0 .546.46.99 1.03.99z"
      />
    </svg>
    <svg viewbox="0 0 22 28" id="minus">
      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16h-19q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10h19q.625 0 1.062.438T22 11.5z" />
    </svg>
    <svg viewbox="0 0 24 32" id="place_edit">
      <path d="M0 11.2C0 5.008 5.366 0 12 0s12 5.008 12 11.2C24 19.6 12 32 12 32S0 19.6 0 11.2zm4.32 5.657l2.868 1.135 10.56-6.327-2.555-4.213-10.54 6.322-.332 3.082zm14.79-8.89c-.978-1.625-1.795-1.795-1.795-1.795l-1.054.634 2.54 4.23 1.054-.637s.215-.838-.745-2.433z"
      />
    </svg>
    <svg viewbox="0 0 23 32" id="place_full">
      <path d="M11.2 0C5.008 0 0 5.008 0 11.2 0 19.6 11.2 32 11.2 32s11.2-12.4 11.2-20.8C22.4 5.008 17.392 0 11.2 0zm0 16a4.8 4.8 0 0 1 0-9.6 4.8 4.8 0 0 1 0 9.6z" />
    </svg>
    <svg viewbox="0 0 23 32" id="place_outline">
      <path d="M11.32 0A11.314 11.314 0 0 0 0 11.32c0 1.93.57 4.096 1.614 6.468.907 2.058 2.15 4.224 3.65 6.444a67.917 67.917 0 0 0 5.16 6.68l.897.993.897-.992a26.42 26.42 0 0 0 .454-.518 67.917 67.917 0 0 0 4.708-6.163c1.497-2.22 2.742-4.386 3.648-6.444 1.045-2.372 1.614-4.538 1.614-6.467C22.642 5.064 17.58 0 11.322 0zm0 2.415a8.9 8.9 0 0 1 8.907 8.906c0 1.546-.488 3.403-1.41 5.494-.84 1.91-2.017 3.957-3.44 6.067a65.305 65.305 0 0 1-4.952 6.414h1.792a58.188 58.188 0 0 1-1.54-1.82 65.305 65.305 0 0 1-3.41-4.594c-1.425-2.11-2.6-4.155-3.442-6.066-.92-2.09-1.41-3.947-1.41-5.493a8.9 8.9 0 0 1 8.907-8.905zm0 12.032a3.128 3.128 0 1 1 0-6.253 3.128 3.128 0 0 1 0 6.253zm0 2.416A5.543 5.543 0 1 0 5.78 11.32a5.543 5.543 0 0 0 5.543 5.543z"
      />
    </svg>
    <svg viewbox="0 0 30 32" id="place_show_all">
      <path d="M0 31.902V5.852L10.54.426l8.64 4.788L30.157.57v26.532L19.18 31.937l-8.797-4.086L0 31.903zM2.416 7.314V28.27l7.993-3.218.09-22.003-8.085 4.263zm16.957.51V29.23l8.516-3.773.07-21.356-8.587 3.724z" />
    </svg>
    <svg viewbox="0 0 22 28" id="plus">
      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16H14v6.5q0 .625-.438 1.062T12.5 24h-3q-.625 0-1.062-.438T8 22.5V16H1.5q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10H8V3.5q0-.625.438-1.062T9.5 2h3q.625 0 1.062.438T14 3.5V10h6.5q.625 0 1.062.438T22 11.5z"
      />
    </svg>
    <svg viewbox="0 0 37 32" id="recover">
      <path d="M4.84 16.556C5.133 25.136 12.18 32 20.83 32c8.838 0 16-7.163 16-16s-7.162-16-16-16c-3.23 0-6.32.96-8.942 2.73l1.35 2.003a13.517 13.517 0 0 1 7.592-2.317c7.503 0 13.585 6.082 13.585 13.585S28.333 29.587 20.83 29.587c-7.318 0-13.284-5.786-13.574-13.032l5.323-.007-6.283-8.093L0 16.564l4.84-.007z"
      />
    </svg>
    <svg viewbox="0 0 32 32" id="regio_logo">
      <path d="M13.944 25.756L16 28.488l2.056-2.732h7.253L29.963 32H2.037l4.655-6.244h7.253zM16 6.244c-2.133 0-3.88 1.756-3.88 3.902s1.746 3.902 3.88 3.902c2.133 0 3.88-1.756 3.88-3.902S18.133 6.244 16 6.244zm8.533 9.366L16 27.317 7.467 15.61h.04a10.024 10.024 0 0 1-1.59-5.463C5.916 4.527 10.414 0 16 0S26.087 4.53 26.087 10.148c0 2.03-.582 3.902-1.59 5.463h.04z"
      />
    </svg>
    <svg viewbox="0 0 26 28" id="star">
      <path d="M26 10.11q0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.296 0-.624-.187L13 21.423 5.984 25.11q-.344.187-.625.187-.33 0-.493-.227t-.164-.555q0-.094.03-.313L6.08 16.39.39 10.86Q0 10.436 0 10.11q0-.58.874-.72l7.844-1.14 3.516-7.11Q12.53.5 13 .5t.766.64l3.516 7.11 7.844 1.14q.875.14.875.72z"
      />
    </svg>
  </defs>
</svg>

<svg>
 <use xlink:href="#star" />
</svg>
＆＃13;
＆＃13;
＆＃13;

注意： SVG 持有 defs将占用页面上的空间，因此习惯用display:none隐藏它。

相关问题
最新问题