将svg添加到网页？ [复制]

Posted 2023-03-06

【中文标题】将svg添加到网页？ [复制]

【英文标题】：Add svg to web page? [duplicate]

【发布时间】：2015-09-30 04:50:22

【问题描述】：

如何将 svg 添加到我的网页并通过 css 更改其颜色？

我试过了：

<img src="my.svg" class="svg"/>

.svg
    fill: white;

但没有运气。

请仅使用 CSS 解决方案，我不需要任何回退，仅支持新浏览器。

【问题讨论】：

包含 SVG 的方法有很多种，请看这里：css-tricks.com/using-svg。重要的是要说某些方法可能看起来更容易（例如像您一样使用<img> 标签或将其用作background-image），但这只会导致您面临的问题：无法在SVG内级联外部CSS，即页面的样式不会反映在加载的 SVG 中。

【参考方案1】：

这种方式是行不通的。如果您直接包含 svg，则可以更改填充颜色，即：

html：

<p>Some other webpage content</p>
<svg class="my-svg">
    <g>
        <path fill="..."></path>
        <path fill="..."></path>
    </g>
</svg>
<p>Some other webpage content</p>

CSS：

.my-svg *
    fill:white;

因此，您对my.svg 进行网络检查，然后将其内容复制粘贴到目标页面。然后你就可以设置样式了。