我試圖創建一個具有以下格式的SVG圖示的外部檔案
。 。<svg>
< 符號 id="icon1" viewbox="0 0 16 16">
<path>/span>....
</symbol>/span>
< 符號 id="icon2" viewbox="0 0 16 16">
<path>/span>....
</symbol>/span>
</svg>/span>是否有辦法將上述檔案鏈接到HTML中，以便我可以用下面的代碼來使用圖示
。<svg>
<use xlink:href="#icon1"/span> />
</svg>
<svg>/span>
<use xlink:href="#icon2" />
</svg>/span>我在為一個診所創建一個flask網路應用，我只需要5-6個圖示。目前，我使用的是行內SVG，效果不錯，但它使代碼變得非常大，我正在尋找一種方法來重構代碼。
uj5u.com熱心網友回復：
你可以使用SVG Sprites來參考。
你將會有一個這樣的SVG-檔案：
<svg xmlns="http://www.w3. org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
< 符號 id="icon1" viewBox="0 0 34 73">
// 你的SVG路徑等
</symbol>
< 符號 id="icon2" viewBox="0 0 34 73">
// 你的SVG路徑等
</symbol>
然后你在你的html中這樣使用該檔案中的單一圖示：
<svg class="you-class-to-style">
<use xlink: href=="{svg-path}/#icon1"></use>/span>
</svg>/span>
<svg class="your-class-to-style"/span>>
<use xlink: href=="{svg-path}/#icon2"></use>/span>
</svg>/span>
uj5u.com熱心網友回復：
你可以在id參考前面使用檔案名。像這里我指的是檔案s2中的符號symbols.svg。這需要從網路服務器上運行。
<!DOCTYPE html>
<html>
<head>
<title> SVG符號</title>
</head>/span>
<body>
<h1>Test</h1>
<svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 200 200">
<use href="symbols.svg#s2" />
</svg>
</body>/span>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333055.html
標籤：
上一篇：MSVC忽略了拋出陳述句