在 HTML 中嵌入 SVG [重复]答案

【问题标题】：Embedding SVG in HTML [duplicate]在 HTML 中嵌入 SVG [重复]
【发布时间】：2018-11-30 18:32:48
【问题描述】：

我试图了解一些关于在 HTML 中使用 SVG 的基本知识：

我知道所有不同的方法：<img>、内联和<object>。但是对于后者，我就是想不通 SVG 属性是如何被控制的。

例如，我想更改填充颜色。我可以通过编辑.svg 文件本身来做到这一点。但是我也可以从我的 CSS 样式表中做到这一点吗？我假设在.svg 文件中添加<style> 标签可能不是推荐的解决方案。

【问题讨论】：

引用 .svg 文件中的样式表，它可以很好地与

标签： css svg

【解决方案1】：

使用fill 而不是background-color 来设置背景颜色的样式

和stroke 而不是border

在这里学习：https://www.w3schools.com/html/html5_svg.asp

例如

svg circle{
fill:red;
stroke:pink;
}
svg path{
fill:red;
}

<p>Shape</p>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"/>
</svg>

<p>with Path:</p>
<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

【讨论】：