如何显示 SVG 文件中的所有符号？

问题描述 投票：0回答：4
svg
4个回答
7
投票

您可以在 Inkscape 中打开文件，然后选择菜单“对象”->“符号”（或按 Ctrl+Shift+Y），然后在下拉菜单中选择“当前文档”。

2
投票

每个 svg 文件一个文件？乏味是对的！

只是稍微不那么繁琐（但也许你可以使用脚本来生成它）：

<svg>
   <use  x="50"  y="50" xlink:href="icons.svg#icon-nextstep-compare" />
   <use x="100"  y="50" xlink:href="icons.svg#icon-arrow-down" />
   <use  x="50" y="100" xlink:href="icons.svg#icon-arrow-down-double" />
   <!-- etc, etc -->
</svg>

更新

您甚至可以使用 xslt 样式表的魔力生成上述内容。 :-)

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:svg="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
  <xsl:template match="/">
    <svg>
      <xsl:for-each select="//svg:symbol">
        <use>
          <xsl:attribute name="x"><xsl:value-of select="position() mod 10 * 20"/></xsl:attribute>
          <xsl:attribute name="y"><xsl:value-of select="floor(position() div 10) * 20"/></xsl:attribute>
          <xsl:attribute name="xlink:href">icons.svg#<xsl:value-of select="@id"/></xsl:attribute>
        </use>
      </xsl:for-each>
    </svg>
  </xsl:template>
</xsl:stylesheet>
0
投票

这不是那么优雅，但是快速且可用。制作一个 html 文件：

<!DOCTYPE html><html><body>

<!-- copy here the content of svg -->   
<svg id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16" id="alarm" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 5.5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5z"/><path d="M6.5 0a.5.5 0 000 1H7v1.07a7.001 7.001 0 00-3.273 12.474l-.602.602a.5.5 0 00.707.708l.746-.746A6.97 6.97 0 008 16a6.97 6.97 0 003.422-.892l.746.746a.5.5 0 00.707-.708l-.601-.602A7.001 7.001 0 009 2.07V1h.5a.5.5 0 000-1h-3zm1.038 3.018a6.093 6.093 0 01.924 0 6 6 0 11-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 014.387 1.86 2.5 2.5 0 000 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 013.527 3.527A2.5 2.5 0 0013.5 1z"/></symbol><symbol fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16" id="alarm-fill" xmlns="http://www.w3.org/2000/svg"><path d="M6 .5a.5.5 0 01.5-.5h3a.5.5 0 010 1H9v1.07a7.001 7.001 0 013.274 12.474l.601.602a.5.5 0 01-.707.708l-.746-.746A6.97 6.97 0 018 16a6.97 6.97 0 01-3.422-.892l-.746.746a.5.5 0 01-.707-.708l.602-.602A7.001 7.001 0 017 2.07V1h-.5A.5.5 0 016 .5zm2.5 5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5zM.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z"/></symbol><symbol fill="currentColor" class="bi bi-align-bottom" viewBox="0 0 16 16" id="align-bottom" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="12" x="6" y="1" rx="1"/><path d="M1.5 14a.5.5 0 000 1v-1zm13 1a.5.5 0 000-1v1zm-13 0h13v-1h-13v1z"/></symbol><symbol fill="currentColor" class="bi bi-align-center" viewBox="0 0 16 16" id="align-center" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 01.5.5V6h-1V1.5A.5.5 0 018 1zm0 14a.5.5 0 01-.5-.5V10h1v4.5a.5.5 0 01-.5.5zM2 7a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16" id="align-end" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.5 1a.5.5 0 00-.5.5v13a.5.5 0 001 0v-13a.5.5 0 00-.5-.5z"/><path d="M13 7a1 1 0 00-1-1H2a1 1 0 00-1 1v2a1 1 0 001 1h10a1 1 0 001-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-middle" viewBox="0 0 16 16" id="align-middle" xmlns="http://www.w3.org/2000/svg"><path d="M6 13a1 1 0 001 1h2a1 1 0 001-1V3a1 1 0 00-1-1H7a1 1 0 00-1 1v10zM1 8a.5.5 0 00.5.5H6v-1H1.5A.5.5 0 001 8zm14 0a.5.5 0 01-.5.5H10v-1h4.5a.5.5 0 01.5.5z"/></symbol></svg>
<!-- copy here the content of svg -->

<br />
<script type="text/javascript">
 const icons=document.getElementById("icons").getElementsByTagName('symbol');
 for(const icon of icons){
  document.write( '<svg>'+
                                        '<use  xlink:href="bootstrap-icons.svg#'+icon.id+'"  color="red" />' +
                                        '<text x="0" y="13">'+icon.id+'<text>' +
                                        
                  '</svg>');
}
</script>

</body>
</html>
  1. 将svg的内容复制到标记的地方（仅svg），并给它id =“icons”。
  2. 将 svg 文件放在 html 旁边，在本例中，有一部分 bootstrap-icons.svg
  3. 图标颜色为红色，因为文字是黑色，只是红色上显示黑色，可能会导致彩色图标出现问题。
  4. 在浏览器中打开 html。
0
投票

角度

TS：

    fetch('/assets/svg/sprites.svg')
      .then(r => r.text())
      .then(text => {
        const container = document.getElementById('svg-sprite');
        container.innerHTML = text;
        const icons = document.querySelectorAll('#svg-sprite svg symbol');
        icons.forEach(el => this.svgIds.push(el.id));
        container.remove();
      })
      .catch(e => console.error(e));

HTML：

<h2>SVG Sprite Icons</h2>
  <div id="svg-sprite"></div>
  <div *ngIf="svgIds.length > 0" class="sprites-grid">
    @for (icon of svgIds; track icon) {
      <div class="flex flex-column align-items-center justify-content-center">
        <i [inlineSVG]="'sprites.svg#' + icon" class="w-2rem h-2rem"></i>
        <span class="text-center">{{ icon }}</span>
      </div>
    }
  </div>

SCSS：

.sprites-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-template-rows: repeat(auto-fill, 6rem);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.