Question

中使用此示例

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

<defs>
<g id="icon-image">
<path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</g>
</defs>
</svg>

<h1>
<svg viewBox="0 0 32 32">
    <use xlink:href="#icon-phone"></use>
 </svg>
Call me

但是，我希望路径定义不在html中，因为它们将在整个应用程序中使用。

这可能吗？（注意：我已经阅读了建议javascript手动将svg注入html的答案。我也不想这样做。）

我知道有很多方法可以嵌入/链接SVG路径和文件。而且我已经尝试过所有这些。特别是，我需要能够将它设置为currentColor。正如本blog post中详细介绍的那样，使用外部SVG文件无法做到这一点，然后将其用于img标记。

所以我发现最接近的是上面这个例子。但是，我仍然不希望嵌入在html中的路径。如果我能以某种方式在某种类型的外部文件中获取它，那么它是可重用的，那将是很好的。

Answer 1

另一种选择是将SVG转换为字体

在互联网上搜索＆＃34;将SVG转换为字体＆＃34;会给你很多网站/工具，比如：

另外＆＃34; HTML实体＆＃34;有一些可重复使用的图标等。

https://dev.w3.org/html5/html-author/charref

Answer 2

这里只有一个剩余选项。你不想手动嵌入svg，你不想用javascript注入它，你不想在img标签中使用它，因为你想用css修改属性。唯一剩下的解决方案是使用服务器端语言来注入它。

如果你正在使用php，你可以简单地回复你想要的svg文件的内容：

<?php echo file_get_contents(file_path); ?>

Answer 3

我发现的另一个选项是SVG Sprites，Chris Coyier

详细解释

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  .icon {
width: 125px;
height: 125px;
background: #eee;
      fill: currentColor;
}

body {
  padding: 20px;
}
</style>
</head>
<body>
<div style="color: red">
    <svg class="icon"><use xlink:href="menu.svg#beaker"/></svg>
</div>
<div style="color: brown">
    <svg class="icon"><use xlink:href="menu.svg#fish" /></svg>
</div>
</body>
</html>

然后在一个名为menu.svg的单独文件中：

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>

<symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z" />
</symbol>

如何将svg路径移出html

3 个答案: