如何在html中引用SVG并使用CSS样式进行修饰

16 浏览
0 Comments

如何在html中引用SVG并使用CSS样式进行修饰

我有许多不同的SVG文件需要包含在我的项目中（Angular 10）。\n其中一些文件会以不同的尺寸、填充颜色等被多次使用。\n我正在尝试找到一种方式在我的HTML代码中引用它们，并可以通过样式进行访问：\nCSS：\n

.svg {
  fill: red;
}

\n引用：\n\n \n\n\n

\n

\n

\n到目前为止，我还没有找到一种解决方案，可以让我引用它们，同时也能像内联添加时那样访问SVG中的fill属性。\n内联：\n\n \n \n\n\n以内联方式添加它们会变得凌乱。\n通常是如何处理这个问题的？\n感谢您的帮助！

0

1 答案

0 Comments

在HTML中引用SVG并使用CSS样式进行修饰是一个常见的需求。然而，由于CSS不适用于文档边界之外的内容，因此无法直接在HTML中引用的外部SVG文件中应用CSS样式。这就导致了问题的出现。

一种解决方法是使用JavaScript在运行时将SVG文件内联到HTML中，具体可以参考这个的问题。

另一种解决方法是将CSS样式直接放在外部SVG文件中。这样就可以直接在SVG文件中定义和应用CSS样式，而不需要在HTML中引用和修饰SVG。

总结起来，要在HTML中引用SVG并使用CSS样式进行修饰，我们可以选择使用JavaScript将SVG文件内联到HTML中，或者将CSS样式直接放在外部SVG文件中。

0