Question

我有这个SVG图像，我将在我的代码中多次使用：

<svg width="100" height="100" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 960v-128q0-26-19-45t-45-19h-320v-320q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v320h-320q-26 0-45 19t-19 45v128q0 26 19 45t45 19h320v320q0 26 19 45t45 19h128q26 0 45-19t19-45v-320h320q26 0 45-19t19-45zm256-544v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z"/></svg>

我怎样才能给它一个'类'，所以我可以像<svg class="icon_svg><path class="icon_path" /></svg>一样使用它。

在CSS中，我可以为一组样式提供一个类名，如何使用HTML属性进行此操作？

Answer 1

HTML没有这样的功能。 CSS没有这样的功能。

重用标记块的常用技术是选择模板引擎并将其应用于编程语言。

这可以通过客户端JavaScript完成，但使用服务器端语言或预处理语言（生成将在部署时发布到Web服务器的静态文件）更常见和可靠。

最近我一直在使用Nunjunks（with Gulp），但其他选项包括TT，Assemble，甚至是简单的PHP include。

对于SVG，您可以use <defs> and <use>：

df1 <- structure(list(Var1 = c(1445L, 656L, NA, 607L, 2098L), 
                      ar2 = c(40L, NA, NA, NA, 15L)), 
                 .Names = c("Var1", "Var2"),
                 row.names = c(NA, -5L), class = "data.frame")

Answer 2

.icon_svg {width: 10px; height: 10px; background: url(img.svg) no-repeat 0 0 / 10px 10px;}

和html

<i class="icon_svg"></i>

如何将一组HTML属性赋予“类”名称？

2 个答案: