如何正确在 HTML 中使用 SVG

发表于 2020-04-13 更新于 2024-10-18 分类于未分类
本文字数： 673 阅读时长 ≈ 1 分钟

在 HTML 中使用 SVG 方式有很多，但是多平台浏览器保持很好的兼容性，存在很多问题。这边文章用于处理这个问题。

[toc]

在 HTML 的使用 SVG 的多种方式

<embed>

属性：


属性	描述
src	指定外部文件的位置。值为资源的 URI
width	指定容器宽度
height	指定容器高度
type	指定嵌入内容的类型。值为 MIME 类型

1	<embed type="image/svg+xml" src="image.svg" />

<frame>

1
2
3

<iframe src="image.svg">
 你的浏览器不支持iframe
</iframe>

<object>

1
2
3

<object type="image/svg+xml" data="image.svg">
  你的浏览器不支持svg
</object>

<img>

1	<img src="image.svg" />

Inline content (内联标签)

<body>
  <svg width="300px" height="300px" 
    xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>
</body>