SVG基础

最新推荐文章于 2024-05-06 17:34:22 发布

UIEngineer

最新推荐文章于 2024-05-06 17:34:22 发布

阅读量326

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79101525

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.SVG介绍
这里写图片描述

2.SVG绘制矢量图形
index.html代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <!-- viewBox定义盒子大小 -->
    <!-- version定义版本 -->
    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
        <!-- 画圆 cx cy 定义圆心坐标 r定义圆心半径 -->
        <circle cx="60" cy="60" r="50"></circle>
    </svg>
</body>
</html>
结果如下：

这里写图片描述

3.引入外部SVG文件
index01.html代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
    <iframe src="./svg.svg" width="400" heigiht="200" frameborder="no"></iframe>
</body>
</html>

svg.svg代码如下：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

UIEngineer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG基础

1.SVG介绍 2.SVG绘制矢量图形 index.html代码如下：html>head>meta charset="utf-8">title>无标题文档title>head>body> svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
复制链接

扫一扫