我正在使用Vue.js,并尝试将我在Illustrator中制作的一些SVG图标放置在我的Web应用程序中。我使用Webpack的"require"加载了这些图标。无法通过它们的源(img标签的src属性)访问svg,因此我们可以像这样使用vue插入它们:
<div class="section-icon" v-html="getIconForEvent(event)"></div>
这样可以在正确的位置显示正确的图标,但我在这种方法中遇到了一些问题。
所有SVG都带有一个内部style标签进行样式设置。因此,最后一个SVG会覆盖所有先前SVG的样式,因为它们似乎都有相同的类。在Chrome开发工具中,看起来像是这样。
我该怎么做才能不让SVG的样式覆盖彼此的类?我没有自己放置style标签,那些只是SVG本身所具有的样式。谢谢!