我有一堆用Illustrator生成的标志,我想直接将它们嵌入到我的网站中。这些svg都有一个
问题在于这些样式彼此干扰。因此,如果最后一个图像定义了
在另一个线程中,有人建议我使用
<style>
元素,在其中定义了在SVG元素内部使用的样式,类似于这样:<svg>
<style>
.st1 { fill:#ff00ff; }
.st2 { fill:#ff3421; }
/* ... and so on */
</style>
<!-- svg paths and shapes -->
</svg>
问题在于这些样式彼此干扰。因此,如果最后一个图像定义了
. st21 {fill:#555555}
,则该样式将应用于所有具有 class =“st21”
的路径,包括所有先前加载的SVG图像的路径。在另一个线程中,有人建议我使用
标记包装我的svg-xml,但似乎不起作用。
如何确保内联SVG样式不相互干扰,而不触及实际的SVG代码?
这是一个pen来说明问题:https://codepen.io/pwkip/pen/RLPgpW
<img>
将它们嵌入。同时,在Illustrater导出SVG时,请告诉您的图形设计师将CSS属性设置为演示属性。 - lumio