SVG学习——1.引入SVG的方式

最新推荐文章于 2024-08-01 00:26:34 发布

anITfish

最新推荐文章于 2024-08-01 00:26:34 发布

阅读量1.6k

点赞数

分类专栏： svg html 文章标签： html svg

本文链接：https://blog.csdn.net/qq_31949641/article/details/107883898

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

svg

11 篇文章 0 订阅

订阅专栏

方式有两种，包括：写在外部文件，和直接写在html文件里面。

一、写在外部文件

【svg文件】

记事本新建svg1.svg，内容为

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

【html文件】

记事本新建test14SVG.html，内容为

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<!--引入svg的方法有三种-->
<!--<img src="svg1.svg" />-->
<!--<div style="height:200px; width:200px; background:url(svg1.svg) no-repeat"></div>-->
<!--<iframe src="svg1.svg"></iframe>-->
</body>
</html>

注意：引入外部svg的方法有三种，通过img，div，iframe都可以，注意选择。

二、直接写在html文件

【html文件】

记事本新建test14SVG.html，内容为

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style>
#div1 {width:400px; height:400px; background:white; }
body {background:black; }
</style>
</head>
<body>
<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>
</div>
</body>
</html>

注：100%使得与style中div1的宽高对应上，占满。