在HTML中使用SVG字形標記

Question

我有一個帶有此源的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標簽？

Answer 1

沒有實現SVG <font>或<glyph>瀏覽器。 最好的辦法是將字形轉換為包含<path> <symbol> <path> ，就像在SVG Sprite表中一樣。 （使用XSLT甚至可以自動執行此轉換。）如果為符號設置了一個viewBox ，其寬度匹配horiz-adv-x且高度與字體的ascent匹配，則可以可靠地內聯使用圖標：

 .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 ，以匹配所使用符號的高度。

如果您沒有在需要優先考慮的嵌入式上下文中使用圖標，則可以將所有符號viewBox寬度設置為統一值（即viewBox="0 0 1024 960" ），然后將viewBox與圖標分開svg，而是設置恆定的寬高比（即width:1.067em; height:1em ）。 然后，某些圖標會在水平方向上溢出該框。