我可以在 "path" 的 CSS 中设置 d= "xxxx" 以便我可以在 HTML 中节省一些空间吗？

Question

我在一个HTML页面中有许多SVG。

以下是它的样子：

<div>
<svg><path d="M230 ...." /></svg>
</div>
<section id="el2">
<svg><path d="M230 ...." /></svg>
</section>
<div id="el3">
<svg><path d="M230 ...." /></svg>
</div>
<p id="el4">
<svg><path d="M230 ...." /></svg>
</p>
....

具有相同路径详细信息的svg在该页面的许多位置。

如果没有JavaScript，我如何避免重复svg代码？有这样的方法吗：

svg path {d:"M230 .... "}

我试过了，但不起作用。改善这一点的最佳方法是什么？

感谢

Answer 1

您可以创建自己的SVG字体，有像Fontello 这样的在线工具

关于SVG字体兼容性的说明(感谢@herrstrietzel(
SVG字体已被弃用，仅受旧浏览器和Safari的支持。为了确保字体正常工作，还可以在字体中包含WOFF(2(和/或TTF文件，以实现最大兼容性。Fontello已经提供了它们，但还有其他转换器可供选择，以防您只有svg。

在CSS中为其创建一个新的font-face，您实际上可以从生成器中获得CSS代码，以便复制&粘贴以及一些其他有用的CSS，以拥有现成的类。

@font-face {
font-family: 'your-font-name';
src: url('../font/your-font-name.eot?34609786');
src: url('../font/your-font-name.eot?34609786#iefix') format('embedded-opentype'),
url('../font/your-font-name.woff2?34609786') format('woff2'),
url('../font/your-font-name.woff?34609786') format('woff'),
url('../font/your-font-name.ttf?34609786') format('truetype'),
url('../font/your-font-name.svg?34609786#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: never;
/* More properties here, i removed them */
}
.icon-download:before { content: 'e804'; }

每个图标都有自己的代码，所以你的字体中可以有很多不同的SVG。

然后您可以在CSS:after和:before中使用它作为content: 'e800';(e800只是一个例子，可能对您有所不同(。

在你的CSS中，在你的HTML中，你可以使用它如下：

<div>
<i class="icon icon-download"></i>
</div>
<section id="el2">
<i class="icon icon-download"></i>
</section>
<div id="el3">
<i class="icon icon-download"></i>
</div>
<p id="el4">
<i class="icon icon-download"></i>
</p>

因此，总的来说，html中的代码会减少，用户只需通过Font下载一次SVG。还有一个巨大的好处，新图标以这种方式添加得非常快。

Answer 2

CSS path((函数

实际上，您可以通过path()函数在css中设置或更改d属性

因此，参考您的示例，您只需要将路径数据字符串包装在这个函数中，如下所示：

svg path {d: path("M230 .... ")}

svg{
height:10em;
}
.pathIcon{
d: path("M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z");
fill:red;
}

<svg class="icon" viewBox="0 0 34 48">
<path class="pathIcon" />
</svg>

备选方案：外部<use>参考

这种方法将允许您在一个svg中存储多个资产，并从外部svg加载它们。

外部svg内容："icons.svg">

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-home" viewBox="0 0 34 48">
<path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</symbol>
<symbol id="icon-close" viewBox="0 0 27 48">
<path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
</symbol>
</svg>

HTML使用

<svg class="icon" viewBox="0 0 27 48">
<use href="icons.svg#icon-close" />
</svg>
<svg class="icon" viewBox="0 0 34 48">
<use href="icons.svg#icon-home" />
</svg>

通过这种方式，您可以在一个文件中存储大量图标，而无需直接内联它们。您仍然可以通过css设置图形样式。

内联svg示例(外部svg在片段中不起作用(

svg{
height:10em;
}
.icon-home{
fill:red;
}
.icon-close{
stroke:green;
stroke-width:1px;
fill:none
}

<svg class="icon icon-close" viewBox="0 0 27 48">
<use href="#icon-close" />
</svg>
<svg class="icon icon-home" viewBox="0 0 34 48">
<use href="#icon-home" />
</svg>
<!-- external svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-home" viewBox="0 0 34 48">
<path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</symbol>
<symbol id="icon-close" viewBox="0 0 27 48">
<path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
</symbol>
</svg>

Answer 3

如果您只想在多个HTML元素的开头出现相同的SVG图像，那么使用::beforeCSS规则可能会更方便。这里有一个例子：

.decorated::before {
content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"%3E%3Cpath d="M0 0 10 5 0 10 5 5Z" fill="blue"/%3E%3C/svg%3E');
display:inline-block;
width:0.75em;
height:0.75em;
margin-right:0.25em;
}

<h1 class="decorated">Lorem ipsum</h1>
<h2 class="decorated">Dolor sit amet</h2>
<h3 class="decorated">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<h4 class="decorated">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
<p class="decorated">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="decorated">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>