在HTML中使用SVG字形标记 [英] Use SVG glyph tag in HTML
问题描述
我有一个具有以下来源的icons.svg文件:
I have an icons.svg file with this source:
<?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=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="arrow-left" horiz-adv-x="1308" d="..." />
<glyph unicode="" glyph-name="arrow-up" horiz-adv-x="1308" d="..." />
<glyph unicode="" glyph-name="arrow-down" horiz-adv-x="860" d="..." />
</font></defs></svg>
有什么办法可以引用HTML
中的glyph
标签吗?我认为是这样的:
Is there any way to refer this glyph
tags from HTML
? I think something like this:
<svg role="img" title="arrow-up"><use xlink:href="icons.svg#arrow-up"></use></svg>
在我的HTML代码中可以使用SVG
标签吗?
Is there any way to use SVG
tags in my HTML code?
推荐答案
没有实现SVG <font>
或<glyph>
的浏览器.最好的办法是将字形转换为包含<path>
的<symbol>
,就像在SVG Sprite表中一样. (使用XSLT甚至可以自动进行此转换.)如果为符号设置了viewBox
,其宽度与horiz-adv-x
相匹配,并且字体的高度与ascent
相匹配,则可以可靠地内联使用图标:
There is no browser that implements SVG <font>
or <glyph>
. The best you can do is convert the glyphs to <symbol>
s containing a <path>
, like in a SVG sprite sheet. (This conversion could be even automated with XSLT.) If you set a viewBox
for the symbol with the width matching horiz-adv-x
and the height the font's ascent
, you can position the icon use reliably inline:
.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
,以与所使用符号的符号相匹配.
The downside is that you don't get the automatic advance that glyphs would give you. The best you can do is to set a constant height and a viewBox
for each referencing <svg>
that matches that of the symbol you are using.
如果您在重要的内嵌上下文中不使用图标,则可以将所有符号viewBox宽度设置为统一值(即viewBox="0 0 1024 960"
),然后将SVG图标中的viewBox保留下来,而是设置一个恒定的宽高比(即width:1.067em; height:1em
).然后,某些图标会在水平方向上溢出该框.
If you don't use the icons in a inline context where the advance is important, you could maybe set all symbol viewBox widths to a unified value (i. e. viewBox="0 0 1024 960"
) and then leave off the viewBox from the icon svg, seting instead a constant width/height ratio (i.e. width:1.067em; height:1em
). Some icons will then overflow that box in the horizontal direction.
这篇关于在HTML中使用SVG字形标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!