问在HTML中使用SVG字形标记
EN

Stack Overflow用户

提问于 2018-07-25 20:53:58

回答 1查看 5.7K关注 0票数 0

我有一个包含以下源代码的icons.svg文件：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="MyIcon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="arrow-left" horiz-adv-x="1308" d="..." />
<glyph unicode="&#xe901;" glyph-name="arrow-up" horiz-adv-x="1308" d="..." />
<glyph unicode="&#xe902;" glyph-name="arrow-down" horiz-adv-x="860" d="..." />
</font></defs></svg>

有没有办法从HTML引用这个glyph标记？我认为应该是这样的：

<svg role="img" title="arrow-up"><use xlink:href="icons.svg#arrow-up"></use></svg>

有没有办法在我的HTML代码中使用SVG标签？

svg

html

回答 1

Stack Overflow用户

发布于 2018-07-26 01:17:06

没有实现SVG、<font>或<glyph>的浏览器。最好的做法是将字形转换为包含<path>的<symbol>，就像在sprite工作表中一样。(这种转换甚至可以通过XSLT实现自动化。)如果您使用与字体的ascent匹配的宽度和高度为符号设置viewBox，则可以可靠地使用内联来定位图标：

.icon, symbol {
    overflow: visible
}
.icon {
    height: 1em
}

<svg xmlns="http://www.w3.org/2000/svg" display="none">
  <symbol id="arrow-left" viewBox="0 0 1308 960">
    <!-- font paths are upside-down! -->
    <path transform="matrix(1 0 0 -1 0 960)" d="..." />
  </symbol>
  <symbol id="arrow-up" viewBox="0 0 1308 960">
    <!-- borrowed a font-awesome icon to show an example, width is too small -->
    <path transform="matrix(1 0 0 -1 0 960)" d="m 1006.87,353.125 q 0,-31.875 -23.12,-56.25 l -46.875,-46.875 q -23.75,-23.75 -56.875,-23.75 -33.75,0 -56.25,23.75 l -183.75,183.125 v -440 q 0,-32.5 -23.438,-52.8125 -23.437,-20.3125 -56.562,-20.3125 h -80 q -33.125,0 -56.563,20.3125 -23.437,20.3125 -23.437,52.8125 v 440 l -183.75,-183.125 q -22.5,-23.75 -56.25,-23.75 -33.75,0 -56.25,23.75 l -46.875,46.875 q -23.75,23.75 -23.75,56.25 0,33.125 23.75,56.875 l 406.875,406.875 q 21.875,23.125 56.25,23.125 33.75,0 56.875,-23.125 l 406.875,-406.875 q 23.12,-24.375 23.12,-56.875 z" />
  </symbol>
  <symbol id="arrow-down" viewBox="0 0 860 960">
    <path transform="matrix(1 0 0 -1 0 960)" d="..." />
  </symbol>
</svg>

<p style="font-size:32px">text <svg viewBox="0 0 1308 960" class="icon"><use xlink:href="#arrow-up"/></svg> text</p>

缺点是你不能像字形那样自动前进。最好的做法是为每个引用<svg>设置一个恒定的高度和一个与所使用符号的高度相匹配的viewBox。

如果你不在内联上下文中使用图标，在那里提升很重要，你可以将所有的symbol viewBox宽度设置为一个统一的值(即viewBox="0 0 1024 960")，然后从图标svg中去掉viewBox，改为设置一个恒定的宽/高比(即width:1.067em; height:1em)。然后，一些图标将在水平方向上溢出该框。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51519429

复制

相似问题

问在HTML中使用SVG字形标记
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中使用SVG字形标记EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中使用SVG字形标记
EN